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 ? '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>

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

(0)

相关推荐

  • Vue 中文本内容超出规定行数后展开收起的处理的实现方法

    文字比较难解释,直接看图应该就懂是要做什么了. 需求 工作中遇到的,需求就是超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容. 思路首先得判断文本自否超过四行,因为这些一般都是是前端异步请求然后后端发送过来,在组长的指导下,使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化.接下来主要是 css 上的思路,其实上图可以分为两部分,如下图,标号1的部分展示前面三行,标号为2的部分会根据1的行数判断缩进的大小,然后展示第四行.最后通过背景色

  • 基于vue展开收起动画的示例代码

    之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网 的过渡&动画,发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果) 1.实际效果 2.代码 <!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .d

  • vue.js 实现点击展开收起动画效果

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图: vue页面: <template> <div class="dealRecord-wrap"> <div class="title-contant" v-for="(item,index) in items " > <div cla

  • vue和react等项目中更简单的实现展开收起更多等效果示例

    前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(

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

    这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多"会展开所有文案,按钮变成"收起" (未超出三行的时候) (展开) (收起) 代码实现: <template> <div> <p class="m-content overflow-line" id="J_descrip

  • React文字展开收起组件的实现示例

    目录 前言 背景 开发 1.1 定义组件所需字段 1.2 获取截断后的文字 1.3 获取展开收起按钮 1.4 展开收起逻辑 1.5 完整代码 1.5.1 逻辑代码 1.5.2 样式代码 1.6 安装使用组件 资源 前言 最近想把在项目中封装的一些公用组件奉献出来,毕竟独乐乐不如众乐乐,好东西就要大家分享.这次还是来聊实战,主题就是文字展开收起组件的实现过程,这个需求在前端项目中也算常见的需求了,可能你已经在项目中使用了自己或别人封装的组件,但是这次还是希望你能耐心地看看我的实现过程,毕竟多一个思

  • 小程序实现展开/收起的效果示例

    前言:本章说下文字内容的展开与收起的实现,要实现这么一个效果:当收起的时候隐藏并显示省略号,当展开的时候显示全部文字. GitHub:https://github.com/Ewall1106/miniProgramDemo 先看下效果图: 小程序 - 展开/收起 1.结构样式 (1)首先我们定义一下html结构: <view class="container"> <view class="title"> <text class=&quo

  • 用javascript 控制表格行的展开和隐藏的代码

    无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

  • Vue实现文本展开收起功能

    本文实例为大家分享了Vue实现文本展开收起功能的具体代码,供大家参考,具体内容如下 先说说需求,以及实现的需求 1.移动端H5,发表留言后跳转到评论列表,超过5行文字,多余的需要隐藏,并且需要有展开/收起按钮 2.未超过5行的文字,不需要展示展开收起/按钮 下面直接丢出核心代码 <div :ref="`community_${index}`"        class="community-words"        :class="{'more-l

  • JavaScript实现文字展开和收起效果

    列表式的文字的展开和收起的实现,供大家参考,具体内容如下 需求: 1:当文字超出目标值,则截取目标值,其他隐藏,同时显示"展开"二字和下拉箭头: 2:点击"展开"显示所有文字,同时改为"收起"和上拉箭头 3:如果文字本身就没有超过目标值,则显示所有文字即可 之前想过使用css设置超出多少行隐藏,或者给Li标签设置高度隐藏,但都无法满足以上第三条,所以想到了下边一种方法将就可以使用 思路: 1:初始遍历需要展开和收起的元素,超出目标值隐藏,然后把所

随机推荐