铁雪资源网 Design By www.gsvan.com

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

效果:

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

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

(未超出三行的时候)

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

(展开)

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 "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>

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

标签:
vue,文字展开收起,vue,多行文字展开收起

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无vue控制多行文字展开收起的实现示例的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?