vue 段落文字太長（長文收縮）點擊展開與收起

vue 段落文字太長點擊展開與收起

效果截圖

組件調用

vue部分

<Unfold data="這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。這裏是文章測試標題，含標點一共二十個字。"/>

屬性說明

data：文字數據
maxLen：最大長度，超過這個數，被截取，默認80

組件完整代碼

<template>
<span>
    <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>
</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>