vue段落文字太长收缩（。。。）展开（全局组件）

新建公共组件

// An highlighted block
<template>
  <div> 
    <span v-if="data.length<maxLen">
        <span class="tj">{{data}}</span>
    </span>
    <span v-else>
        <span class="tj">{{showBtn?sliceStr:data}}
            <span class="btnWord" @click="showBtn=!showBtn">{{showBtn?"全文":"收起"}}</span>
        </span>
    </span>
  </div>
</template>
<script>
export default {
  name: 'unfold',
  data () {
    return {
      showBtn: true,
    }
  },
  props: {
        // 数据
        data: {
            type: String,
            default: ''
        },
        // 最大长度
        maxLen: {
            type: Number,
            default: 80
        },
    },
  methods:{
    
  },
  mounted(){

  },
  computed: {
        sliceStr() {
            console.log(this.data)
            if (this.data != null) {
                return this.data.substring(0, this.maxLen) + "...";
            }
            return '';
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tj {
    text-align: justify;
}

.btnWord {
    color: cornflowerblue;
    cursor: pointer;
    word-break: keep-all;
}
</style>

使用组件
import 引入 components注入组件
template 使用标签 绑定data数据 maxLength设置数据长度