vue实现文章内容过长点击阅读全文功能的实例

直接上代码：

html:

<div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
  <div v-html="content"></div>
</div>
<div class="contentToggle" v-if="contentStatus" @click="contentStatus=!contentStatus">阅读全文</div>

css:

.bodyFont{
 .font-dpr(16px);
 color: #333;
 text-align: left;
 line-height:58px;
 word-break:break-all;
 word-wrap:break-word;
 padding-bottom: 30px;
 height:auto;
 overflow: hidden;
 max-height: 100%;
 p{margin:16px 0 0 0;}
 }
 .bodyHeight{
 height:5000px;
 }
 .contentToggle{
 height:60px;
 line-height:60px;
 text-align: center;
 color:@red;
 border:1px solid @red;
 border-radius: 5px;
 .font-dpr(14px);
 margin-bottom:30px;
 }

js:

data(){
 return {
  contentStatus:false,
  curHeight:0,
  bodyHeight:5000
 }
},
mounted(){
 setTimeout(()=>{
  this.contentToggle();
 },500)
 },
methods:{
 contentToggle(){
 this.curHeight=this.$refs.bodyFont.offsetHeight;
 if(this.curHeight>this.bodyHeight){
  this.contentStatus=true;
 }else{
  this.contentStatus=false;
 }
 },
}

效果如图：

实现思路与注意的点：

1、获取内容的高度要等到dom加载完成之后，在mounted里加一个setTimeout函数，保证能真正获取到

2、当内容的高度高于自己设定的要展示的高度的时候，则只限定在自己要展示的高度中，加一个class解决，注意要overflow：hidden；

以上这篇vue实现文章内容过长点击阅读全文功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现文章内容过长点击阅读全文功能的实例

    vue实现文章内容过长点击阅读全文功能的实例

    直接上代码: html: <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}"> <div v-html="content"></div> </div> <div class="contentToggle

  • vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

    1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会报错 2. 定位功能,代码如下: const map = new AMap.Map(this.$refs.container, { resizeEnable: true }) // 创建Map实例 const options = { 'showButton': true, // 是否显示定位按钮 '

  • Android实现自动点击无障碍服务功能的实例代码

    Android实现自动点击无障碍服务功能的实例代码

    ps: 不想看代码的滑到最下面有apk包百度网盘下载地址 1. 先看效果图 不然都是耍流氓 2.项目目录 3.一些配置 build.gradle plugins { id 'com.android.application' id 'kotlin-android' id 'kotlin-android-extensions' } android { compileSdkVersion 30 buildToolsVersion "30.0.3" defaultConfig { applic

  • vue实现一个6个输入框的验证码输入组件功能的实例代码

    要实现的功能: 完全和单输入框一样的操作,甚至可以插入覆盖: 1,限制输入数字 2,正常输入 3,backspace删除 4,paste任意位置粘贴输入 5,光标选中一个数字,滚轮可以微调数字大小,限制0-9 6,123|456 自动覆盖光标后输入的字符,此时光标在3后,继续输入111,会得到123111,而不用手动删除456 7,封装成vue单文件组件,方便任意调用. 模板代码 <template> <div class="input-box"> <di

  • vue Element UI扩展内容过长使用tooltip显示示

    vue Element UI扩展内容过长使用tooltip显示示

    目录 1. 介绍 2. element-ui(vue2版本) 2.1 注册指令 1) akTooltipAutoShow.js 2.2 使用 3. element-plus(vue3版本) 3.1 注册指令 1) akTooltipAutoShow.js 2) 进行局部或全局注册 3.2 使用 1. 介绍 Tooltip常用于展示鼠标 hover 时的提示信息. 而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容. 本文章的思路是通过一个自定义指令

  • Vue element-ui中表格过长内容隐藏显示的实现方式

    目录 一.el-table表格 二.Popover 弹出框 总结 一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表格中列数一多的话,显出出来的效果会很难看. 为了解决上述问题,我们可以利用<el-table-column>组件提供的一个属性::show-overflow-tooltip='true' 添加该属性,会将过长的部分内容隐藏起来,并且

  • vue动态渲染svg、添加点击事件的实现

    业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed.img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id="svgTemplate"></div> </div>

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件)  项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许

  • vue绑定的点击事件阻止冒泡的实例

    当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc

随机推荐