vue 段落文字太长（长文收缩）点击展开与收起

vue 段落文字太长点击展开与收起

效果截图

组件调用方法

vue部分

<Unfold data="这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。这里是文章测试标题，含标点一共二十个字。" maxLength="100"/>

属性说明

data：文字数据
maxLen：最大长度，超过这个数，被截取，默认80，不改长度无需传值

组件完整代码

<template>
<span>
    <span v-if="data.length">
        <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>
span>
template>

<script>
export default {
      
    name: "unfold",
    data() {
      
        return {
      
            showBtn: true,
        }
    },
    props: {
      
        // 数据
        data: {
      
            type: String,
            default: ''
        },
        // 最大长度
        maxLen: {
      
            type: Number,
            default: 80
        },
    },
    computed: {
      
        sliceStr() {
      
            if (this.data != null) {
      
                return this.data.substring(0, this.maxLen) + "...";
            }
            return '';
        }
    },
}
script>

<style lang="less" scoped>
.tj {
      
    text-align: justify;
}

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