drip-ui/lib/dialog/Dialog.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _default = (0, _create["default"])({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('transition', {
      attrs: {
        "name": "dialog",
        "mode": "in-out"
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.visible,
        expression: "visible"
      }],
      "class": _vm.b('overlay'),
      attrs: {
        "transition": "fade"
      },
      on: {
        "touchmove": _vm.dialogTouchmove
      }
    }, [!_vm.isSlot ? _c('div', {
      "class": _vm.b('dialog')
    }, [_vm.title ? _c('div', {
      "class": _vm.b('title')
    }, [_c('h1', {
      "class": _vm.b('title-text'),
      domProps: {
        "textContent": _vm._s(_vm.title)
      }
    })]) : _vm._e(), _vm.content ? _c('div', {
      "class": _vm.b('title-content'),
      domProps: {
        "innerHTML": _vm._s(_vm.content)
      }
    }) : _vm._e(), _vm._t("default"), _vm.showClose ? _c('a', {
      "class": _vm.b('close-dialog'),
      attrs: {
        "href": "javascript:;"
      },
      on: {
        "click": _vm.onHide
      }
    }) : _vm._e()], 2) : _vm._t("free")], 2)]);
  },
  name: 'dialog',
  props: {
    visible: {
      type: Boolean
    },
    title: {
      type: String,
      "default": ''
    },
    content: {
      type: String,
      "default": ''
    },
    showClose: {
      type: Boolean,
      "default": true
    },
    isSlot: {
      type: Boolean,
      "default": false
    },
    touchmoveClose: {
      type: Boolean,
      "default": false
    }
  },
  watch: {
    visible: function visible(val) {
      var _this = this;

      if (val) {
        // 弹框出现的时候禁止body滚动
        document.body.style.overflow = 'hidden';
        setTimeout(function () {
          _this.$el.style.opacity = 1;
        });
      } else {
        document.body.style.overflow = 'auto';
        this.$el.style.opacity = 0;
      }
    }
  },
  methods: {
    onHide: function onHide() {
      this.$emit('onHide');
    },
    dialogTouchmove: function dialogTouchmove() {
      if (this.touchmoveClose) this.onHide();
    }
  }
});

exports["default"] = _default;