popup component

components.json

@@ -5,5 +5,6 @@
   "radio": "./packages/radio/index.js",
   "cell": "./packages/cell/index.js",
   "icon": "./packages/icon/index.js",
-  "cell-group": "./packages/cell-group/index.js"
+  "cell-group": "./packages/cell-group/index.js",
+  "popup": "./packages/popup/index.js"
 }

docs/examples/popup.md

@@ -0,0 +1,84 @@
+<script>
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false
+    }
+  },
+
+  watch: {
+    popupShow2(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow2 = false;
+        }, 2000);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.o2-popup-1 {
+  width: 100%;
+  height: 200px;
+}
+
+.o2-popup-2 {
+  width: 100%;
+  line-height: 44px;
+  background-color: rgba(0, 0, 0, 0.701961);
+  text-align: center;
+  color: #fff;
+}
+
+.o2-popup-3 {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.o2-popup-4 {
+  width: 50%;
+  height: 200px;
+  background: #fff;
+  border-radius: 10px;
+}
+</style>
+
+## Popup组件
+
+### 基础用法
+
+:::demo
+```html
+<o2-button @click="popupShow1 = true">从下方弹出popup</o2-button>
+<o2-popup v-model="popupShow1" position="bottom" class="o2-popup-1">
+  xxxx
+</o2-popup>
+
+<o2-button @click="popupShow2 = true">从上方方弹出popup</o2-button>
+<o2-popup v-model="popupShow2" position="top" class="o2-popup-2" :overlay="false">
+  更新成功
+</o2-popup>
+
+<o2-button @click="popupShow3 = true">从右方弹出popup</o2-button>
+<o2-popup v-model="popupShow3" position="right" class="o2-popup-3" :overlay="false">
+  <o2-button @click.native="popupShow3 = false">关闭 popup</o2-button>
+</o2-popup>
+
+<o2-button @click="popupShow4 = true">从中间弹出popup</o2-button>
+<o2-popup v-model="popupShow4" transition="popup-fade" class="o2-popup-4">
+  一些内容
+</o2-popup>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| value | 利用`v-model`绑定当前组件是否显示 | Boolean  | '' |   |

docs/nav.config.json

@@ -77,8 +77,8 @@
               "title": "Lazyload"
             },
             {
-              "path": "/pop",
+              "path": "/popup",
-              "title": "Pop"
+              "title": "Popup"
             },
             {
               "path": "/swipe",

packages/popup/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/popup/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/popup/index.js

@@ -0,0 +1,3 @@
+import Popup from './src/popup';
+
+export default Popup;

packages/popup/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/popup/src/popup.vue

@@ -0,0 +1,71 @@
+<template>
+  <transition :name="currentTransition">
+    <div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'o2-popup',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: false
+    },
+
+    closeOnClickOverlay: {
+      default: true
+    },
+
+    transition: {
+      type: String,
+      default: 'popup-slide'
+    },
+
+    position: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      currentValue: false,
+      currentTransition: this.transition
+    };
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', val);
+    },
+
+    value(val) {
+      this.currentValue = val;
+    }
+  },
+
+  beforeMount() {
+    if (this.transition !== 'popup-fade') {
+      this.currentTransition = `popup-slide-${ this.position }`;
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.currentValue = true;
+      this.open();
+    }
+  }
+};
+</script>

packages/zanui/src/index.pcss

@@ -5,4 +5,5 @@
 @import './cell.pcss';
 @import './field.pcss';
 @import './icon.pcss';
+@import './popup.pcss';
 @import './switch.pcss';

packages/zanui/src/popup.pcss

@@ -0,0 +1,75 @@
+.v-modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.701961);
+}
+
+@component-namespace o2 {
+  @component popup {
+    position: fixed;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    backface-visibility: hidden;
+    transition: .2s ease-out;
+
+    @modifier top {
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier right {
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    @modifier bottom {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier left {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-active {
+  transform: translate3d(-50%, -100%, 0);
+}
+
+.popup-slide-right-enter,
+.popup-slide-right-leave-active {
+  transform: translate3d(100%, -50%, 0);
+}
+
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.popup-slide-left-enter, .popup-slide-left-leave-active {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-fade-enter, .popup-fade-leave-active {
+  opacity: 0;
+}

src/index.js

@@ -5,6 +5,7 @@ import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
 import Icon from '../packages/icon/index.js';
 import CellGroup from '../packages/cell-group/index.js';
+import Popup from '../packages/popup/index.js';
 // zanui
 import '../packages/zanui/src/index.pcss';
 
@@ -18,6 +19,7 @@ const install = function(Vue) {
   Vue.component(Cell.name, Cell);
   Vue.component(Icon.name, Icon);
   Vue.component(CellGroup.name, CellGroup);
+  Vue.component(Popup.name, Popup);
 };
 
 // auto install
@@ -34,5 +36,6 @@ module.exports = {
   Radio,
   Cell,
   Icon,
-  CellGroup
+  CellGroup,
+  Popup
 };

src/mixins/popup/index.js

@@ -0,0 +1,194 @@
+import Vue from 'vue';
+import merge from 'src/utils/merge';
+import PopupManager from './popup-manager';
+
+let idSeed = 1;
+
+const getDOM = function(dom) {
+  if (dom.nodeType === 3) {
+    dom = dom.nextElementSibling || dom.nextSibling;
+    getDOM(dom);
+  }
+  return dom;
+};
+
+let scrollBarWidth;
+const getScrollBarWidth = () => {
+  if (Vue.prototype.$isServer) return;
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+
+  return widthNoScroll - widthWithScroll;
+};
+
+export default {
+  props: {
+    /**
+     * popup当前显示状态
+     */
+    value: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否显示遮罩层
+     */
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 点击遮罩层是否关闭popup
+     */
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: [String, Number],
+    /**
+     * popup滚动时是否body内容也滚动
+     * 默认为不滚动
+     */
+    lockOnScroll: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (val) {
+        if (this.opening) return;
+
+        if (!this.rendered) {
+          this.rendered = true;
+          Vue.nextTick(() => {
+            this.open();
+          });
+        } else {
+          this.open();
+        }
+      } else {
+        this.close();
+      }
+    }
+  },
+
+  beforeMount() {
+    this._popupId = 'popup-' + idSeed++;
+    PopupManager.register(this._popupId, this);
+  },
+
+  data() {
+    return {
+      opening: false,
+      opened: false,
+      closing: false,
+      bodyOverflow: null,
+      bodyPaddingRight: null
+    };
+  },
+
+  methods: {
+    /**
+     * 显示popup
+     */
+    open(options) {
+      if (this.opened) return;
+
+      this.opening = true;
+
+      this.$emit('input', true);
+
+      const dom = getDOM(this.$el);
+      const props = merge({}, this, options);
+      const overlay = props.overlay;
+      const zIndex = props.zIndex;
+
+      // 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
+      if (zIndex) {
+        PopupManager.zIndex = zIndex;
+      }
+
+      // 如果显示遮罩层
+      if (overlay) {
+        if (this.closing) {
+          PopupManager.closeModal(this._popupId);
+          this.closing = false;
+        }
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
+        if (props.lockOnScroll) {
+          // 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
+          if (!this.bodyOverflow) {
+            this.bodyPaddingRight = document.body.style.paddingRight;
+            this.bodyOverflow = document.body.style.overflow;
+          }
+          scrollBarWidth = getScrollBarWidth();
+          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+          if (scrollBarWidth > 0 && bodyHasOverflow) {
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+          }
+          document.body.style.overlay = 'hidden';
+        }
+      }
+
+      dom.style.zIndex = PopupManager.nextZIndex();
+      this.opened = true;
+      this.opening = false;
+    },
+
+    /**
+     * 关闭popup
+     */
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.$emit('input', false);
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+            document.body.style.paddingRight = this.bodyPaddingRight;
+          }
+          this.bodyOverflow = null;
+          this.bodyPaddingRight = null;
+        }, 200);
+      }
+
+      PopupManager.closeModal(this._popupId);
+      this.opened = false;
+      this.closing = false;
+    }
+  },
+
+  beforeDestroy() {
+    PopupManager.deregister(this._popupId);
+    PopupManager.closeModal(this._popupId);
+
+    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
+      document.body.style.overflow = this.bodyOverflow;
+      document.body.style.paddingRight = this.bodyPaddingRight;
+    }
+    this.bodyOverflow = null;
+    this.bodyPaddingRight = null;
+  }
+};

src/mixins/popup/popup-manager.js

@@ -0,0 +1,133 @@
+import { addClass, removeClass } from 'src/utils/dom';
+
+let hasModal = false;
+
+const getModal = function() {
+  let modalDom = PopupManager.modalDom;
+  if (modalDom) {
+    hasModal = true;
+  } else {
+    hasModal = false;
+    modalDom = document.createElement('div');
+    PopupManager.modalDom = modalDom;
+
+    modalDom.addEventListener('touchmove', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    modalDom.addEventListener('click', function() {
+      PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
+    });
+  }
+
+  return modalDom;
+};
+
+const instances = {};
+
+const PopupManager = {
+  zIndex: 2000,
+
+  modalStack: [],
+
+  nextZIndex() {
+    return this.zIndex++;
+  },
+
+  getInstance(id) {
+    return instances[id];
+  },
+
+  register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+
+  deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+
+  handleOverlayClick() {
+    const topModal = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topModal) return;
+
+    const instance = PopupManager.getInstance(topModal.id);
+    if (instance && instance.closeOnClickOverlay) {
+      instance.close();
+    }
+  },
+
+  openModal(id, zIndex, dom) {
+    if (!id || zIndex === undefined) return;
+
+    const modalStack = this.modalStack;
+
+    for (let i = 0, j = modalStack.length; i < j; i++) {
+      const item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+
+    const modalDom = getModal();
+
+    addClass(modalDom, 'v-modal');
+    setTimeout(() => {
+      removeClass(modalDom, 'v-modal-enter');
+    }, 200);
+
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom);
+    } else {
+      document.body.appendChild(modalDom);
+    }
+
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.style.display = '';
+
+    this.modalStack.push({ id: id, zIndex: zIndex });
+  },
+
+  closeModal(id) {
+    const modalStack = this.modalStack;
+    const modalDom = getModal();
+
+    if (modalStack.length > 0) {
+      const topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (let i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      setTimeout(() => {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+
+          modalDom.style.display = 'none';
+          this.modalDom = undefined;
+        }
+        removeClass(modalDom, 'v-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+export default PopupManager;

src/utils/dom.js

@@ -0,0 +1,45 @@
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else {
+      if (!hasClass(el, clsName)) {
+        curClass += ' ' + clsName;
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+};
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else {
+      if (hasClass(el, clsName)) {
+        curClass = curClass.replace(' ' + clsName + ' ', ' ');
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+};

src/utils/merge.js

@@ -0,0 +1,15 @@
+export default function(target, ...sources) {
+  for (let i = 1, j = sources.length; i < j; i++) {
+    let source = arguments[i] || {};
+    for (let prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        let value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};