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 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
js实现网页抽奖实例
Aug 05 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
详解webpack 多入口配置
Jun 16 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
three.js 如何制作魔方
Jul 31 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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery表单事件实例代码分享
2016/08/18 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
体育教师求职信
2014/06/30 职场文书
大学校园招聘会感想
2015/08/10 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Java Spring读取和存储详细操作
2022/08/05 Java/Android
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS