vue中多行文本标签_vue控制多行文字展开收起的实现示例

川长思鸟来 2022-11-05 15:59 476阅读 0赞

这里讲一下，如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。

效果：

这里设置了控制三行，如果超过三行会展示，“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案，按钮变成“收起”

![4c64606c085162943a8d4e3f6c38b843.png][]

(未超出三行的时候)

![fdd2970b99f5a28131e635e81f76eab4.png][]

(展开)

![70aab2264d0220fc499bd2e98bb47097.png][]

(收起)

代码实现：

\{ \{introduce\}\}

export default \{

name: 'Spread',

data() \{

return \{

isShowMore: false,

isDescStatus: true,

introduce: ""

\};

\},

props: \{

mes2: \{

type: String,

default: ""

\},

methods: \{

showmoreDesc(e) \{

let el = e.currentTarget;

el.previousElementSibling.classList\[!this.isDescStatus ? 'add' : 'remove'\]('overflow-line');

el.classList\[this.isDescStatus ? 'add' : 'remove'\]('more-collapse');

el.innerHTML = !this.isDescStatus ? '查看更多' : '收起';

this.isDescStatus = !this.isDescStatus;

that.isShowMore = true;

\},

watch: \{

mes2(val) \{

this.introduce = val;

if (this.introduce.length > 75) \{

this.isShowMore = true;

\};

.m-content \{

&.overflow-line \{

display: -webkit-box;

\-webkit-box-orient: vertical;

\-webkit-line-clamp: 3;

overflow: hidden;

.btn-more \{

color: \#fff;

float: right;

color: \#5383E7;

position: relative;

margin-top: rc(5);

padding-right: rc(33);

&.more-collapse \{

&::after,

&::before \{

top: 2px;

transform: rotate(180deg);

&::before \{

top: 4px;

&::after,

&::before \{

width: 0;

height: 0;

content: '';

position: absolute;

right: 0;

top: 7px;

border: rc(12) solid transparent;

&::after \{

border-top-color: \#5383E7;

z-index: 1;

&::before \{

border-top-color: \#1c2239;

z-index: 2;

top: 5px;

使用组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持IIS7站长之家。

[4c64606c085162943a8d4e3f6c38b843.png]: /images/20221023/01cb2e00ff8f467aa79978e29cb24c80.png
[fdd2970b99f5a28131e635e81f76eab4.png]: /images/20221023/0af82bb0439e4e8597f1c9e84d93e697.png
[70aab2264d0220fc499bd2e98bb47097.png]: /images/20221023/1cc480d3b2604ce39fb19438caa19d0d.png