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


Posted in Javascript onOctober 11, 2019

这里讲一下,如何使用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 ? '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>

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

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 #Javascript
js脚本中执行java后台代码方法解析
Oct 11 #Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 #Javascript
ES6之Proxy的get方法详解
Oct 11 #Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 #Javascript
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
JavaScript实现抖音罗盘时钟
Oct 11 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
删除节点的jquery代码
2014/01/13 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
了解重排与重绘
2019/05/29 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
基于python实现学生管理系统
2018/10/17 Python
Python类中self参数用法详解
2020/02/13 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
社区优秀志愿者先进事迹
2014/05/09 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2015年助残日活动总结
2015/03/27 职场文书
电影红河谷观后感
2015/06/11 职场文书
重阳节活动主持词
2015/07/04 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书