vue+element-Popover封装判别文字溢出添加气泡效果的自定义指令

原打算趁着清明小长假将这个指令说明写完的，奈何三天都是陪着家人出去游玩了，再加上本来就有点懒，一拖再拖，今天终于下定决心记录一下。

想必读到此文的朋友，可能遇到过产品经理或者用户提出，要自动识别文字是否溢出，溢出时才展示气泡，不溢出不展示气泡。提这个需求多半是因为我们正常做文字溢出提示的时候直接在标签上加title属性，或者使用组件库的气泡或者tooltip来做的，不做特殊处理的话，就会出现不管溢不溢出都会有气泡效果，这样的体验确实不是很好，所以能够自动判别文字溢出来加气泡效果很有必要。所以我就封装了一个指令，水平一般，能力有限，不到之处欢迎指正。

先上使用效果，如下图：

指令代码结构：

popper.vue代码：

<template>
  <el-popover
    :placement="placement"
    :title="title"
    :width="width"
    :trigger="trigger"
    :content="content"
    :disabled="disabled"
  >
    <div
      slot="reference"
      id="popper-text"
      class="popper-text"
      :style="style"
      @mouseenter="hoverEvent($event)"
    >
      {{ popperText }}
    </div>
  </el-popover>
</template>
<script>
export default {
  data() {
    return {
      content: "",
      popperText: "",
      title: "",
      width: 0,
      placement: "top-start",
      trigger: "hover",
      style: {},
      disabled: true,
    };
  },
  methods: {
    hoverEvent(event) {
      const ele = event.target;
      if (ele) {
        this.disabled = !(ele.scrollWidth > ele.offsetWidth);
      }
    },
  },
};
</script>

popper.js代码：

import Vue from "vue"
import Popper from "./popper.vue"

const PopperIcon = Vue.extend(Popper)

export default {
    bind: function(el,binding){
        const popper = new PopperIcon({
            el: document.createElement("div"),
            data(){}
        })
        el.innerText = "";
        el.appendChild(popper.$el);
        el.instance = popper;
        el.instance.content = binding.value.content || "";//主要参数之一：气泡中的文字
        el.instance.popperText = binding.value.popperText || "";//主要参数之一：触发气泡的文字
        el.instance.title = binding.value.title || "";
        el.instance.width = binding.value.width || 200;
        el.instance.placement = binding.value.placement || "top-start";
        el.instance.trigger = binding.value.trigger || "hover";
        el.instance.style = {...el.style};
    },
    unbind: function(el){
        el.instance&&el.instance.$destroy();
    }
}

index.js代码：

import Popper from "./popper.js"
export default {
  install(Vue) {
      Vue.directive("popper", Popper)
  },
}

在main.js中注册引用

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import popper from "./directive/popper"

Vue.use(ElementUI);

Vue.use(popper);

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

使用处代码示例（缺点是要写行内样式）：

<div
  v-popper="{
    content: '这是一个气泡demo01,气泡中展示的内容',
    popperText: '这是一个气泡demo01',
  }"
  style="
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  "
>
  这是一个气泡demo01
</div>

<div
  v-popper="{
    content: '这是一个气泡demo02,气泡中展示的内容',
    popperText: '这是一个气泡demo02',
  }"
  style="
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  "
>
  这是一个气泡demo02
</div>

此指令主要是通过scrollWidth和offsetWidth进行比较，如果scrollWidth>offsetWidth时说明文字溢出，通过scrollWidth和offsetWidth的比较值来控制气泡的disabled属性，主要参见popper.vue中的hoverEvent方法。

指令中比较重要的参数分别是：content（气泡中的文字），popperText（触发气泡的文字）。

TIME！