指令 v-tooltip

利用element ui el-tooltip 组件实现

一、创建全局指令

1.创建tooltip指令

import Vue from 'vue'
/* eslint-disable */

Vue.directive('tooltip', {
  inserted(el, binding, vnode, oldVnode) {
    // 获取app.vue根节点下的 ref为tooltip的el-tooltip组件
    const tooltip = vnode.context.$root._vnode.child.$refs.tooltip
    // const { content, placement='top' } = binding.value || { content: '', placement: 'top' }

    // 给添加指令的el对象添加鼠标移入事件
    el.__vueTooltipMouseenter__ = function() {

　　　　 const { content, placement='top' } = el.tooltip_binding_value || binding.value || { content: '', placement: 'top' }

// 获取content值，如果没有则取innerText 或 textContent
      tooltip.$parent.$data.tooltipContent = content || el.innerText || el.textContent;
      tooltip.$parent.$data.tooltipPlacement = placement;
      // 关联el
      tooltip.referenceElm = el;
      // 隐藏之前打开的popper
      tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
      tooltip.doDestroy();
      tooltip.setExpectedState(true);
      tooltip.handleShowPopper();
    } 
    // 给添加指令的el对象添加鼠标移入事件
    el.__vueTooltipMouseleave__ = function() {
      tooltip.setExpectedState(false);
      tooltip.handleClosePopper();
    } 
    // 绑定事件
    el.addEventListener('mouseenter', el.__vueTooltipMouseenter__);
    el.addEventListener('mouseleave', el.__vueTooltipMouseleave__);
  },
  unbind(el, binding, vnode, oldVnode) {
    el.removeEventListener('mouseenter', el.__vueTooltipMouseenter__);
    el.removeEventListener('mouseleave', el.__vueTooltipMouseleave__);
    delete el.__vueTooltipMouseenter__;
    delete el.__vueTooltipMouseleave__;
  },
  update: function () {

      // 同步更新指令形参数据，在鼠标移入时读取显示新数据

      el.tooltip_binding_value= binding.value

  },
  componentUpdated: function () {}
})

2.  .app.vue 添加全局el-tooltip组件

<template>
  <div id="app">
    ...
    <router-view/>
    <!-- 添加全局公用el-tooltip -->
    <el-tooltip  :placement="tooltipPlacement" ref="tooltip" :content="tooltipContent"></el-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      /* 为el-tooltip设置content值 */
      tooltipContent: '',
      /* 为el-tooltip设置placement值 */
      tooltipPlacement: 'top'
    }
  },
  components: {
  },
  mounted() {
  },
  created() {
  },
  methods: {
  }
}
</script>

3.main.js 引入tooltip指令

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
// 引入tooltip指令
import '@/directive/tooltip'


Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(window.ELEMENT, {
  size: 'small'
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.应用v-tooltip 指令

<template>
  <div>
        <div class="t-ellipsis" v-tooltip">
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
        <div class="t-ellipsis" v-tooltip="{content: '描述说明'}" >
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
        <div class="t-ellipsis" v-tooltip="{content: '描述说明', placement: 'right' }" >
            文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style>
</style>