vue 段落文字太长点击展开与收起
效果截图
使用方法
- 将组件完整代码复制到你的组件文件夹里
- 在你需要使用组件的位置进行组件引入、调用
组件被调用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!