vue-ant-patterns/lib/d-modal/index.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _antDesignVue = require('ant-design-vue');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

// console.log(Modal);
var DModal = {
  name: 'DModal',
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: (0, _extends3['default'])({}, _antDesignVue.Modal.props, {
    // prefixCls: PropTypes.string.def('d-modal'),
    // locale: PropTypes.object,
    // 是否开启拖拽事件
    draggable: {
      type: Boolean,
      'default': true
    },
    size: {
      type: String,
      'default': 'small'
    },
    borderRadius: {
      // 弹框是否有圆角
      type: Boolean,
      'default': false
    }
  }),
  created: function created() {},
  data: function data() {
    var _cx;

    var _$props = this.$props,
        size = _$props.size,
        borderRadius = _$props.borderRadius;

    return {
      sizeType: size,
      classList: (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, 'd-modal-wrapper', 1), (0, _defineProperty3['default'])(_cx, 'fullscreen-dialog', size === 'fullscreen'), (0, _defineProperty3['default'])(_cx, 'big-dialog', size === 'large'), (0, _defineProperty3['default'])(_cx, 'middle-dialog', size === 'middle'), (0, _defineProperty3['default'])(_cx, 'small-dialog', size === 'small'), (0, _defineProperty3['default'])(_cx, 'border-radius-class', borderRadius === false), _cx))
    };
  },

  watch: {
    size: function size(newVal, old) {
      var borderRadius = this.$props.borderRadius;

      if (newVal !== old) {
        var _cx2;

        this.sizeType = newVal;
        this.classList = (0, _classnames2['default'])((_cx2 = {}, (0, _defineProperty3['default'])(_cx2, 'd-modal-wrapper', 1), (0, _defineProperty3['default'])(_cx2, 'fullscreen-dialog', this.sizeType === 'fullscreen'), (0, _defineProperty3['default'])(_cx2, 'big-dialog', this.sizeType === 'large'), (0, _defineProperty3['default'])(_cx2, 'middle-dialog', this.sizeType === 'middle'), (0, _defineProperty3['default'])(_cx2, 'small-dialog', this.sizeType === 'small'), (0, _defineProperty3['default'])(_cx2, 'border-radius-class', borderRadius === false), _cx2));
      }
    },

    visible: {
      handler: function () {
        var _ref = (0, _asyncToGenerator3['default'])( /*#__PURE__*/_regenerator2['default'].mark(function _callee(visible) {
          var _this = this;

          return _regenerator2['default'].wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  this.$nextTick();
                  setTimeout(function () {
                    _this.handleModalDrag(visible);
                  }, 30);

                case 2:
                case 'end':
                  return _context.stop();
              }
            }
          }, _callee, this);
        }));

        function handler(_x) {
          return _ref.apply(this, arguments);
        }

        return handler;
      }()
    }
  },
  methods: {
    handleModalDrag: function handleModalDrag(visible) {
      if (visible) {
        var dragWraps = document.querySelectorAll('.ant-modal-wrap');
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = dragWraps[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var wrap = _step.value;

            var display = this.getStyle(wrap, 'display');
            var draggable = wrap.getAttribute('data-drag');
            if (display !== 'none') {
              // 拖拽位置
              draggable === null && this.drag(wrap);
            }
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator['return']) {
              _iterator['return']();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      }
    },
    getStyle: function getStyle(dom, attr) {
      if (window.document.currentStyle) {
        return dom.currentStyle[attr];
      } else {
        return getComputedStyle(dom, false)[attr];
      }
    },
    drag: function drag(wrap) {
      var _this2 = this;

      if (!wrap) return;
      wrap.setAttribute('data-drag', this.draggable);
      var dialogHeaderEl = wrap.querySelector('.ant-modal-header');
      var dragDom = wrap.querySelector('.ant-modal');

      if (!dialogHeaderEl || !dragDom || !this.draggable) return;

      dialogHeaderEl.style.cursor = 'move';
      // const sty =
      //   dragDom.currentStyle || window.getComputedStyle(dragDom, null);
      dialogHeaderEl.onmousedown = function (e) {
        // 鼠标按下，计算当前元素距离可视区的距离
        var disX = e.clientX;
        var disY = e.clientY;
        var screenWidth = document.body.clientWidth; // body当前宽度
        var screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)

        var dragDomWidth = dragDom.offsetWidth; // 对话框宽度
        var dragDomheight = dragDom.offsetHeight; // 对话框高度

        var minDragDomLeft = dragDom.offsetLeft;

        var maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
        var minDragDomTop = dragDom.offsetTop;
        var maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
        // 获取到的值带px 正则匹配替换
        var domLeft = _this2.getStyle(dragDom, 'left');
        var domTop = _this2.getStyle(dragDom, 'top');
        var styL = domLeft;
        var styT = domTop;

        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (domLeft.includes('%')) {
          styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100);
          styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100);
        } else {
          styL = +domLeft.replace(/px/g, '');
          styT = +domTop.replace(/px/g, '');
        }

        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          var left = e.clientX - disX;
          var top = e.clientY - disY;

          // 边界处理
          if (-left > minDragDomLeft) {
            left = -minDragDomLeft;
          } else if (left > maxDragDomLeft) {
            left = maxDragDomLeft;
          }

          if (-top > minDragDomTop) {
            top = -minDragDomTop;
          } else if (top > maxDragDomTop) {
            top = maxDragDomTop;
          }

          // 移动当前元素
          dragDom.style.cssText += ';left:' + (left + styL) + 'px;top:' + (top + styT) + 'px;';
        };

        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  },
  mounted: function mounted() {
    // console.log('mounted');
  },
  render: function render() {
    var h = arguments[0];
    var $listeners = this.$listeners,
        $slots = this.$slots,
        classList = this.classList;
    var sizeType = this.sizeType;

    var tmpBodyS = { height: 'calc(100% - 48px)' };
    var tmpBodySh = { height: '100%' };
    var w = sizeType === 'fullscreen' ? '100%' : sizeType === 'large' ? '1000px' : sizeType === 'middle' ? '720px' : '520px';
    var dialogProps = {
      props: (0, _extends3['default'])({}, this.$props, {
        width: w,
        centered: true,
        bodyStyle: this.$props.footer === null ? this.$props.title === false ? tmpBodySh : tmpBodyS : {},
        wrapClassName: classList + ' ' + (this.$props.wrapClassName ? this.$props.wrapClassName : '')
      }),
      on: (0, _extends3['default'])({}, $listeners)
    };
    // console.log(dialogProps);
    return h(
      _antDesignVue.Modal,
      (0, _babelHelperVueJsxMergeProps2['default'])([dialogProps, { ref: 'bDialog' }]),
      [Object.keys($slots).map(function (name) {
        return h(
          'template',
          { slot: name },
          [$slots[name]]
        );
      })]
    );
  }
};
// import Mod from 'ant-design-vue/es/modal/Modal';


DModal.info = _antDesignVue.Modal.info;
DModal.success = _antDesignVue.Modal.success;
DModal.error = _antDesignVue.Modal.error;
DModal.warning = _antDesignVue.Modal.warning;
DModal.warn = _antDesignVue.Modal.warn;
DModal.confirm = _antDesignVue.Modal.confirm;
DModal.install = function (Vue) {
  Vue.component(DModal.name, DModal);
};

exports['default'] = DModal;