vue控制多行文字展开收起的实现示例

时间:2020-05-17 马优晨人气:0

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

效果：

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

在这里插入图片描述

（未超出三行的时候）

在这里插入图片描述

（展开）

在这里插入图片描述

（收起）

代码实现：

<template>
 <div>
  <p class="m-content overflow-line" id="J_description">{{introduce}}</p>
  <button type="button" class="btn-more" v-if="isShowMore" id="J_btnmore" @click="showmoreDesc($event)">查看更多</button>
 </div>
</template>
<script>
 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;
    }
   }
  }
 };
</script>

<style lang="less" scoped>
 .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;
  }

 }
</style>

使用组件

<Spread :mes2="需要传递的文字数据"></Spread>

加载全部内容