@mdsfe/mds-ui/dist/_mixin/tooltip.js

A set of enterprise-class Vue UI components.

'use strict';

exports.__esModule = true;
exports.MdsTooltipContent = undefined;

var _from = require('babel-runtime/core-js/array/from');

var _from2 = _interopRequireDefault(_from);

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

var _popper = require('./popper');

var _popper2 = _interopRequireDefault(_popper);

var _transition = require('../transition');

var _transition2 = _interopRequireDefault(_transition);

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

var MdsTooltipContent = exports.MdsTooltipContent = {
  functional: true,
  render: function render(h, context) {
    var data = context.data;
    return h('div', {
      'class': ['mds-tooltip-inner']
    }, data.$slots.title || data.title);
  }
};

/**
 * 统一处理浮层提示功能
 */
exports.default = {
  mixins: [_popper2.default],
  props: {
    placement: {
      type: String,
      default: 'top'
    },
    title: String,
    disabled: Boolean,
    effect: {
      type: String,
      default: 'dark'
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    mouseEnterDelay: {
      type: Number,
      default: 0
    },
    mouseLeaveDelay: {
      type: Number,
      default: 0.1
    },
    className: {
      type: String
    },
    popperOptions: {
      type: Object,
      default: function _default() {}
    }
  },
  data: function data() {
    return {
      visibleArrow: true
    };
  },
  beforeCreate: function beforeCreate() {
    this.popperVM = new _vue2.default({
      components: {
        MdsTransition: _transition2.default,
        MdsTooltipContent: MdsTooltipContent
      },
      data: {
        _h: function _h() {},
        vnode: ''
      },
      render: function render(h) {
        this._h = h;
        return this.vnode;
      }
    }).$mount();
  },
  render: function render(h) {
    if (this.popperVM) {
      var _h = this.popperVM._h;
      this.popperVM.vnode = _h('mds-transition', {
        props: {
          type: 'zoom',
          motion: 'big-fast'
        }
      }, [_h('div', {
        'class': this.popperCls,
        directives: [{
          name: 'show',
          value: !this.disabled && this.visible,
          expression: 'show'
        }],
        ref: 'popper'
      }, [_h('div', {
        'class': [this.prefixCls + '-content', this.effect === 'light' ? 'mds-tooltip-light' : '']
      }, [h('mds-tooltip-content', this)])])]);
    }
    if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
    return this.$slots.default[0];
  },
  mounted: function mounted() {
    var _this = this;

    if (this.$slots.default && this.$slots.default.length > 0) {
      this.reference = this.$slots.default[0].elm;
      if (this.trigger === 'click') {
        this.reference.addEventListener('click', this.toggle);
        document.addEventListener('click', this.clickDocument);
      } else if (this.trigger === 'focus') {
        var flag = false;
        // 元素中包含input／textarea优先使用focus和blur事件，其他使用mouse事件
        if (this.reference.nodeName === 'INPUT' || this.reference.nodeName === 'TEXTAREA') {
          this.reference.addEventListener('focus', this.showPopper);
          this.reference.addEventListener('blur', this.closePopper);
          flag = true;
        } else if (this.reference.children.length > 0) {
          flag = (0, _from2.default)(this.reference.children).some(function (node) {
            if (node.nodeName === 'INPUT' || node.nodeName === 'TEXTAREA') {
              node.addEventListener('focus', _this.showPopper);
              node.addEventListener('blur', _this.closePopper);
              return true;
            }
            return false;
          });
        }
        if (!flag) {
          this.reference.addEventListener('mousedown', this.showPopper);
          this.reference.addEventListener('mouseup', this.closePopper);
          // 处理鼠标一直按下直到移出点击区域时浮层没关闭的情况
          this.reference.addEventListener('blur', this.closePopper);
        }
      } else {
        this.reference.addEventListener('mouseenter', this.showPopper);
        this.reference.addEventListener('mouseleave', this.closePopper);
      }
      this.$nextTick(function () {
        _this.$nextTick(function () {
          _this.popper = _this.popperVM.$el || _this.$refs.popper || _this.popper;
          if (_this.popper && _this.trigger === 'hover') {
            _this.popper.addEventListener('mouseenter', function () {
              clearTimeout(_this.timeout);
            });
            _this.popper.addEventListener('mouseleave', _this.closePopper);
          }
        });
      });
    }
    if (this.$attrs.value) {
      this.showPopper();
    }
  },

  components: {
    MdsTransition: _transition2.default
  },
  computed: {
    popperCls: function popperCls() {
      return [this.prefixCls].concat(this.placementCls).concat(this.className);
    },
    currentMouseEnterDelay: function currentMouseEnterDelay() {
      return this.mouseEnterDelay * 1000;
    },
    currentMouseLeaveDelay: function currentMouseLeaveDelay() {
      return this.mouseLeaveDelay * 1000;
    }
  },
  destroyed: function destroyed() {
    document.removeEventListener('click', this.clickDocument);
  },

  methods: {
    toggle: function toggle() {
      return this.visible ? this.closePopper() : this.showPopper();
    },
    showPopper: function showPopper() {
      var _this2 = this;

      if (this.visible) return;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function () {
        _this2.visible = true;
        _this2.$emit('onVisibleChange', _this2.visible);
      }, this.currentMouseEnterDelay);
    },
    closePopper: function closePopper() {
      var _this3 = this;

      if (!this.visible) return;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function () {
        _this3.visible = false;
        _this3.$emit('onVisibleChange', _this3.visible);
      }, this.currentMouseLeaveDelay);
    },

    /**
     * 点击其他空白位置需要关闭浮层
     * @param e
     */
    clickDocument: function clickDocument(e) {
      if (!this.visible || !this.$el || !this.reference || !this.popper || this.$el.contains(e.target) || this.reference.contains(e.target) || this.popper.contains(e.target)) return;
      this.closePopper();
    }
  }
};