drip-ui/es/popup/index.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
import Popup from 'vue-popup';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', [_c('transition', {
      attrs: {
        "name": "popup-mark"
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.currentValue,
        expression: "currentValue"
      }],
      "class": _vm.b('mark')
    })]), _c('transition', {
      attrs: {
        "name": _vm.currentTransition
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.currentValue,
        expression: "currentValue"
      }],
      "class": _vm.b(['popup', _vm.position ? 'popup-' + _vm.position : ''])
    }, [_vm.isShowTitle ? _c('div', {
      "class": [_vm.b('picker-title'), _vm.isShowHeadBorder ? 'drip-popup__picker-title-border-bottom' : '']
    }, [_c('div', {
      staticClass: "drip-popup__header"
    }, [_vm._t("header", [_c('span', {
      "class": _vm.b('title'),
      domProps: {
        "textContent": _vm._s(_vm.title)
      }
    }), _c('span', {
      "class": _vm.b('sub-title'),
      domProps: {
        "textContent": _vm._s(_vm.subtitle)
      }
    })])], 2), _vm.isCancelIcon ? _c('div', {
      "class": _vm.b('cancel-button'),
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.cancelFn($event);
        }
      }
    }, [_c('img', {
      attrs: {
        "src": "//alioss.sdbao.com/common/drip-close.png"
      }
    })]) : _vm._e()]) : _vm._e(), _c('div', {
      "class": _vm.b(['content', _vm.submitBtn ? 'content-submit' : '']),
      style: {
        'height': _vm.height
      }
    }, [!_vm.submitBtn ? _vm._t("default") : _vm._t("content")], 2), _vm.submitBtn ? _c('div', {
      "class": _vm.b('submit-footer')
    }, [_vm._t("button")], 2) : _vm._e()])])], 1);
  },
  name: 'popup',
  mixins: [Popup],
  props: {
    modal: {
      "default": true
    },
    title: {
      "default": ''
    },
    subtitle: {
      "default": ''
    },
    height: {
      type: String
    },
    modalFade: {
      "default": true
    },
    lockScroll: {
      "default": true
    },
    closeOnClickModal: {
      "default": false
    },
    popupTransition: {
      type: String,
      "default": 'popup-slide'
    },
    position: {
      type: String,
      "default": ''
    },
    isCancelIcon: {
      type: Boolean,
      "default": true
    },
    isShowHeadBorder: {
      type: Boolean,
      "default": true
    },
    cancel: {
      type: Function
    },
    isClose: {
      type: Boolean
    },
    submit: {
      type: Function
    },
    submitBtn: {
      type: Boolean,
      "default": false
    },
    isShowTitle: {
      type: Boolean,
      "default": true
    }
  },
  data: function data() {
    return {
      currentValue: false,
      currentTransition: this.popupTransition,
      currentTop: 0
    };
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$emit('input', val);

      if (val) {
        this.currentTop = document.documentElement.scrollTop || document.body.scrollTop; // 禁用滚动条

        document.body.style.overflow = 'hidden';
        document.body.style.position = 'fixed'; // 设置body的宽度，以防fixed定位影响布局

        document.body.style.width = '10rem';
      } else {
        // 启用滚动条
        document.body.style.width = '';
        document.body.style.overflow = 'auto';
        document.body.style.position = 'static';
        window.scrollTo(0, this.currentTop);
      }
    },
    value: function value(val) {
      this.currentValue = val;
    },
    isClose: function isClose(val) {
      if (val) this.currentValue = false;
    }
  },
  beforeMount: function beforeMount() {
    if (this.popupTransition !== 'popup-fade') {
      this.currentTransition = "popup-slide-" + this.position;
    }
  },
  mounted: function mounted() {
    if (this.value) {
      this.rendered = true;
      this.currentValue = true;
      this.open();
    }
  },
  destroyed: function destroyed() {
    // 启用滚动条
    document.body.style.overflow = 'auto';
    document.body.style.position = 'static';
    window.scrollTo(0, this.currentTop);
  },
  methods: {
    cancelFn: function cancelFn() {
      typeof this.cancel === 'function' ? this.cancel() : this.currentValue = false;
    }
  }
});