vue中实现文本超过指定行省略显示组件

废话不多说，直接上代码

<template>
  <div class="text-limit">
    <span class="hide-text" ref="onlyOne">{{value ? value.slice(0, 2) : "中国"}}</span>
    <span class="hide-text" ref="hideText"></span>
    {{resultStr}}
  </div>
</template>

<script>
    export default {
        name: "TextLimit",

        props: {
            value: {
                type: String
            },
            // 显示几行
            limit: {
                type: Number,
                require: true
            },
            // 尾巴，默认省略 ...
            tail: {
                type: String
            }
        },

        data() {
            return {
                resultStr: this.value,
                resultTail: this.tail || '...'
            }
        },

        computed: {
            result(){
                return this.value
            }
        },

        mounted() {
            // 如果没有传进来值，不用处理
            if (!this.value) {return}
            // 获取每一行文本的高度
            let lineHeight = this.$refs.onlyOne.clientHeight;
            // 获取隐藏文本标签（通过往这个标签添加文本判断实时的高度来处理最终需要显示的文本）
            let hideText = this.$refs.hideText;
            // 隐藏文本标签添加传进来的文本
            hideText.innerHTML = this.value;
            // 获取隐藏文本高度
            let currentHeight = hideText.clientHeight;
            // 如果小于等于需要限制的行数，不用处理
            let lineNum = Math.ceil(currentHeight / lineHeight);
            if (lineNum <= this.limit) {return}

            // 文本长度
            let len = this.value.length;
            // lineNum - 1 是为了获取到的值大于限制行，好做 -- 处理
            let end = Math.ceil(len * (this.limit / (lineNum - 1)));

            // 不断减掉一个字，直达行数达到要求
            while (lineNum > this.limit) {
                end--;
                hideText.innerHTML = this.value.slice(0, end) + this.resultTail;
                currentHeight = this.$refs.hideText.clientHeight;
                lineNum = Math.ceil(currentHeight / lineHeight);
            }
            
            this.resultStr = this.value.slice(0, end) + this.resultTail
        }
    }
</script>

<style scoped lang="less">
  .text-limit {
    position: relative;

    .hide-text {
      position: absolute;
      width: 100%;
      visibility:hidden;
    }
  }
</style>