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

效果截图

使用方法

1. 将组件完整代码复制到你的组件文件夹里
2. 在你需要使用组件的位置进行组件引入、调用

组件被调用demo

注意：你需要改变你的组件的位置

vue部分

<template>
<div class="box">
    <!-- 单独调用 -->
    <h4>单独调用</h4>
    <p>
        <unfold :data="data1" :maxLen="30"></unfold>
    </p>
    <!-- 循环数据多次调用 -->
    <h4>循环数据多次调用</h4>
    <p v-for="(item,index) in list" :key="index" >
        <unfold :data="item.title" :maxLen="item.maxLen"></unfold>
    </p>
</div>
</template>

<script>
import unfold from '@/components/Unfold.vue'
export default {
    components: {
        unfold
    },
    data() {
        return {
            data1:"This sentence's length is 40 just right.This sentence's length is 40 just right.t This sentence's length is 40 just right.",
            list: [{
                    title: '这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。',
                    maxLen:40
                },
                {
                    title: '嗯，文章的测试内容，含标点一共二十个字。嗯，文章的测试内容，含标点一共二十个字。嗯，文章的测试内容，含标点一共二十个字。嗯，文章的测试内容，含标点一共二十个字。嗯，文章的测试内容，含标点一共二十个字。这是文章的测试内容，含标点一共二十个字。',
                    maxLen:20
                }
            ]
        }
    }
}
</script>
<style lang="scss" scoped >
    .box{
        padding:50px;
    }
</style>

属性说明

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?tip:"收起"}}</span>
        </span>
    </span>
</span>
</template>

<script>
export default {
    name: "unfold",
    data() {
        return {
            showBtn: true,
        }
    },
    props: {
        tip:{
            type:String,
            default:'全文'
        },
        // 数据
        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="scss" scoped>
.tj {
    text-align: justify;
    line-height: 1.8em;
    display: inline-block;
}

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

如果觉得有用，请点赞收藏让更多人的同行少走弯路，祝所有同行朋友，程序没bug！