Vue文字超出省略，hover显示文本内容（textTooltip）_vue鼠标悬停显示文字

父组件引用：

import textTooltip from "@/components/textTooltip"

<text-tooltip :value="item.Name" :direction="'top'" :row="1"/>

三个参数：

value：文本内容

direction： tooltip展示位置

row： 几行省略

textTooltip组件代码：

<template>

    <div ref="text" class="text-tooltip">

      <el-tooltip :content="value" :placement="direction" effect="light" v-if="isShowHover">

        <p :style="textStyle" class="tip-text">{{value}}</p>

      </el-tooltip>

      <p v-else class="text">{{value}}</p>

    </div>

  </template>

  

  <script>

  export default {

    // 显示文字组件，可以设置最多显示几行，超过后会隐藏并且鼠标hover显示全部信息（需要给组件设置宽度）

    name: "VueText",

    props: {

      value: {

        type: String,

        default: "",

      },

      row: {

        //最多显示几行，超过后会...隐藏 为0时不隐藏

        type: [Number, String],

        default: 0,

      },

      direction: {

        type: String,

        default: "top",

      },

    },

    computed: {

      text() {

        return this.$refs.text;

    },

  },

  data() {

    return {

      isShowHover: false,

      textStyle: {},

      div: null,

    };

  },

  watch: {

    row: function (val) {

      this.init();

    },

    value: function () {

      this.isShowHover = false;

      this.textStyle = {

        cursor: "text",

      };

      this.$nextTick(() => {

        this.getStyle(this.row - 0);

      });

    },

  },

  mounted() {

    this.init();

  },

  methods: {

    init() {

        this.getStyle(this.row - 0);

    },

    getStyle(val) {

      let lineHeight = getComputedStyle(this.text).lineHeight.replace("px", "") - 0 || 20;

      let height = getComputedStyle(this.text).height.replace("px", "") - 0;

      if (height > lineHeight * val) {

        this.isShowHover = true;

        this.textStyle = {

          height: `${lineHeight * val}px`,

          webkitLineClamp: val,

          webkitBoxOrient: "vertical",

        };

      } else {

        this.isShowHover = false;

        this.textStyle = {

          cursor: "text",

        };

      }

    },

    

    },

};

</script>

<style lang="less">

    .text-tooltip {

        .tip-text {

            overflow: hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            cursor: pointer;

        }

        .text {

            cursor: pointer;

            /* line-height: 20px;

            height: 20px; */

        }

    }

</style>