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

文章目录

vue 段落文字太长点击展开与收起
- 效果截图
- 使用方法
- 组件被调用demo
- - 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！

vue 段落文字太长（长文收缩）点击展开与收起，查看更多，收起，展开相关推荐

echarts横坐标文字太长显示不完的两种解决办法：rotate旋转文字、调用函数让文字纵向排列
//方法1:横坐标文字太长显示不完,调用函数解决,在axisLabel下添加属性,让文字纵向排列: formatter:function(val){return val.split("&qu ...
java clob内存溢出_java - java.sql.SQLException：ORA-01704：字符串文字太长时插入或更新 - 堆栈内存溢出...
通常,当我插入4000个字符限制时,它的工作正常,但当超过4000个字符时,它抛出SQL异常字符串文字太长,即使我的DISCHARGE_TEXT数据类型是CLOB 我的JavaScript代码是 fu ...
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...
oracle导入提示字符过长,Oracle 解决【ORA-01704:字符串文字太长】
错误提示:oracle在toad中执行一段sql语句时,出现错误'ORA-01704:字符串文字太长'.如下图: 原因:一般为包含有对CLOB字段的数据操作.如果CLOB字段的内容非常大的时候,会导致 ...
【解决方案】Oracle插入/更新CLOB字段报ORA-01704：字符串文字太长
[解决方案]Oracle插入/更新CLOB字段报ORA-01704:字符串文字太长解决办法: 1.如果插入的SQL比较少,那么可以人工处理.方法是使用PLSQL Developer软件,命令为:se ...
echarts tooltip文字太长换行
tooltip文字太长换行,设置了宽度也没有换行,加上一句: extraCssText: 'max-width:300px; white-space:pre-wrap', 没加之前是这样: 加上之后 ...
vue实现文字过长鼠标移上去显示对应文字，移走隐藏
vue实现文字过长鼠标移上去显示对应文字,移走隐藏 vue项目里实现列表里因文字过长,加上鼠标移上去显示对应文字效果示例图片 html js 数据定义 style vue项目里实现列表里因文字过长, ...
html文字太长隐藏,[分享]Dvi+Css框架页面中文本过长用CSS实现截取隐藏文字 | 霸王硬上弓's Blog...
有时候文字太长时会影响页面的布局div标签,需要把后面的隐藏掉,只显示省略号(-),对于div标签比较容易如: .content { width:100px; white-space:nowrap; ...
latex 分行表格标题过长_latex排版中表格中表格文字太长需要强制换行。
latex排版中表格中表格文字太长需要强制换行. (2017-11-17 10:02:20) 标签: it 教育科研 \newcommand{\tabincell}[2]{\begin{tabul ...

vue 段落文字太长（长文收缩）点击展开与收起，查看更多，收起，展开

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

文章目录

效果截图

使用方法

组件被调用demo

vue部分

属性说明

组件完整代码

vue 段落文字太长（长文收缩）点击展开与收起，查看更多，收起，展开相关推荐

最新文章

热门文章