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

vivo ui component lib for vue

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import '../../assets/common.css';
import Layer from '../layer/index';
import mixinType from '../../mixins/type';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .vui-dialog-box { position: fixed; left: 50%; top: 50%; padding: .6rem .5rem .5rem; min-width: 60%; line-height: normal; text-align: center; background: #fff; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; border-radius: .1rem; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .vui-dialog-close { right: .24rem; top: .24rem; } .vui-dialog-title { margin: 0 0 .6em; color: #000; font-size: .5rem; } .vui-dialog-content { padding: .48em 0; color: #666; font-size: .42rem; } .vui-dialog-footer { padding-top: .4rem; font-size: 0; text-align: justify; } .vui-dialog-footer::after { content: \"\"; display: inline-block; width: 100%; } .vui-dialog-footer > span { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #aaa; font-size: .38rem; line-height: 2.1; text-align: center; -webkit-border-radius: .08rem; -moz-border-radius: .08rem; border-radius: .08rem; border: .03rem solid #c1c1c1; } .vui-dialog-footer > .vui-dialog-primary { color: #fff; border-color: #ff7b2c; background: #ff7b2c; } /*pc样式*/ .vui-dialog-pc .vui-dialog-box { padding: 30px 25px 25px; min-width: 300px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .vui-dialog-pc .vui-dialog-close { right: 18px; top: 18px; width: 22px; height: 22px; cursor: pointer; } .vui-dialog-pc .vui-dialog-close::before, .vui-dialog-pc .vui-dialog-close::after { height: 2px; } .vui-dialog-pc .vui-dialog-title { font-size: 20px; } .vui-dialog-pc .vui-dialog-content { font-size: 16px; } .vui-dialog-pc .vui-dialog-footer { padding-top: 16px; } .vui-dialog-pc .vui-dialog-footer > span { cursor: pointer; font-size: 16px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-width: 1px; } ";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({ class: ['vui-dialog', 'vui-dialog-' + _vm.page.type], attrs: { "appear": true, "show": _vm.value } }, 'layer', _vm.$attrs, false), [_c('div', { staticClass: "vui-dialog-box" }, [_vm.close ? _c('span', { staticClass: "va-close-icon vui-dialog-close", on: { "click": _vm.onClose } }) : _vm._e(), _vm._v(" "), _vm.title ? _c('p', { staticClass: "vui-dialog-title" }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "vui-dialog-content" }, [_vm._t("default")], 2), _vm._v(" "), _vm.btns.length ? _c('div', { staticClass: "vui-dialog-footer" }, [_vm._l(_vm.btns, function (btn, index) {
      return [_c('span', { class: _defineProperty({}, 'vui-dialog-' + btn.type, btn.type), style: { width: (_vm.btns.length > 1 ? 90 / _vm.btns.length : 100) + '%' }, on: { "click": function click($event) {
            _vm.$emit('btn-click', index);
          } } }, [_vm._v(_vm._s(btn.text))]), _vm._v(" "), void 0];
    })], 2) : _vm._e()])]);
  }, staticRenderFns: [],
  name: 'vdialog',
  inheritAttrs: false,
  mixins: [mixinType],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    close: { // 右上角是否有关闭按钮
      type: Boolean,
      default: false
    },
    autoClose: { // 点击关闭按钮或者后退是否自动关闭
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    btns: {
      type: Array,
      default: function _default() {
        return [{
          text: '取消'
        }, {
          text: '确定',
          type: 'primary' // 主按钮，颜色不一样
        }];
      }
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function handler(value) {
        if (value) {
          window.history.pushState({
            vuiDialog: true
          }, '');
          window.addEventListener('popstate', this.onpopstate);
        } else {
          if (window.history.state && window.history.state.vuiDialog) {
            window.history.back();
          }
        }
      }
    }
  },
  methods: {
    onpopstate: function onpopstate() {
      window.removeEventListener('popstate', this.onpopstate);
      this.onClose();
    },
    onClose: function onClose() {
      this.autoClose && this.$emit('input', false);
      this.$emit('btn-click', -1);
    }
  },
  components: {
    Layer: Layer
  }
};

export default index;