vivo-ui/lib/components/popup/index.js

vivo ui component lib for vue

import Layer from '../layer/index';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .src-components-popup-index--popup--3EYQa { position: fixed; background: #fff; } .src-components-popup-index--top--Ropq6 { left: 0; right: 0; top: 0; } .src-components-popup-index--bottom--1tZgm { left: 0; right: 0; bottom: 0; } .src-components-popup-index--left--3fE5x { left: 0; top: 0; bottom: 0; } .src-components-popup-index--right--3yC7k { right: 0; top: 0; bottom: 0; } .src-components-popup-index--popup--3EYQa-enter.src-components-popup-index--top--Ropq6, .src-components-popup-index--popup--3EYQa-leave-to.src-components-popup-index--top--Ropq6 { -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .src-components-popup-index--popup--3EYQa-enter.src-components-popup-index--bottom--1tZgm, .src-components-popup-index--popup--3EYQa-leave-to.src-components-popup-index--bottom--1tZgm { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .src-components-popup-index--popup--3EYQa-enter.src-components-popup-index--left--3fE5x, .src-components-popup-index--popup--3EYQa-leave-to.src-components-popup-index--left--3fE5x { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .src-components-popup-index--popup--3EYQa-enter.src-components-popup-index--right--3yC7k, .src-components-popup-index--popup--3EYQa-leave-to.src-components-popup-index--right--3yC7k { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('layer', _vm._b({ style: _vm.layer ? {} : { bottom: 'auto' }, attrs: { "show": _vm.show }, nativeOn: { "click": function click($event) {
          if ($event.target !== $event.currentTarget) {
            return null;
          }_vm.clickLayerClose && _vm.close();
        } }, scopedSlots: _vm._u([{ key: "default", fn: function fn(slot) {
          return _c('transition', _vm._b({ attrs: { "name": _vm.$style.popup } }, 'transition', _vm.$attrs, false), [_c('div', { directives: [{ name: "show", rawName: "v-show", value: _vm.show, expression: "show" }], class: [_vm.$style.popup, _vm.$style[_vm.position], slot.className], style: slot.styleObj }, [_vm._t("default")], 2)]);
        } }]) }, 'layer', _vm.$attrs, false));
  }, staticRenderFns: [], cssModules: { "popup": "src-components-popup-index--popup--3EYQa", "top": "src-components-popup-index--top--Ropq6", "bottom": "src-components-popup-index--bottom--1tZgm", "left": "src-components-popup-index--left--3fE5x", "right": "src-components-popup-index--right--3yC7k" },
  model: {
    prop: 'show',
    event: 'toggle'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    layer: { // 是否有遮罩层
      type: Boolean,
      default: true
    },
    position: { // 弹出位置
      type: String,
      default: 'bottom',
      validator: function validator(value) {
        return ['top', 'bottom', 'left', 'right'].indexOf(value) !== -1;
      }
    },
    autoClose: { // 多久自动关闭，单位ms，0表示不自动关闭
      type: Number,
      default: 0
    },
    clickLayerClose: { // 点击遮罩层是否关闭
      type: Boolean,
      default: true
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    }
  },
  watch: {
    show: {
      handler: function handler(value) {
        if (this.autoClose > 0) {
          if (value) {
            this.timeoutId = setTimeout(this.close, this.autoClose);
          } else {
            // 清除延时器
            clearTimeout(this.timeoutId);
          }
        }
      },

      immediate: true
    }
  },
  methods: {
    close: function close() {
      this.$emit('toggle', false);
    }
  },
  components: {
    Layer: Layer
  }
};

export default index;