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 相关文章推荐
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue SSR 组件加载问题
May 02 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
这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
目录,文件操作详谈―PHP
2006/11/25 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
python实现自动更换ip的方法
2015/05/05 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python如何查看网页代码
2020/06/07 Python
python操作redis数据库的三种方法
2020/09/10 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
房屋转让协议书范本
2014/04/11 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
酒后驾车标语
2014/06/30 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
撤诉状格式范本
2015/05/19 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers