脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue实现文章内容过长点击阅读全文功能

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

 更新时间：2017年12月28日 08:37:42   作者：蓓蕾心晴  
下面小编就为大家分享一篇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实现文章内容过长点击阅读全文功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

相关文章

  • vue3组合式api创建单文件组件的写法

    vue3组合式api创建单文件组件的写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下
    2023-08-08
  • vue生命周期四个阶段created和mount详解

    vue生命周期四个阶段created和mount详解

    这篇文章主要介绍了vue生命周期四个阶段created和mount,本文给大家介绍的非常详细,补充介绍了什么是实例,什么是实例被挂载到DOM,什么是dom,dao操作又是什么,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧
    2018-10-10
  • Vue新搭档TypeScript快速入门实践记录

    Vue新搭档TypeScript快速入门实践记录

    TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。这篇文章主要介绍了Vue新搭档TypeScript快速入门实践,需要的朋友可以参考下
    2021-06-06
  • Vue3利用自定义ref实现防抖功能

    Vue3利用自定义ref实现防抖功能

    在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下
    2024-05-05
  • 使用Vue封装一个前端通用右键菜单组件

    使用Vue封装一个前端通用右键菜单组件

    这篇文章主要为大家详细介绍了如何使用Vue封装一个前端通用右键菜单组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • Vue使用三方工具vueUse实现虚拟列表

    Vue使用三方工具vueUse实现虚拟列表

    其实采用vueUse中的useVirtualList方法同样可以实现虚拟列表,这篇文章小编就来和大家详细介绍一下如何使用vueUse实现简单的虚拟列表效果吧
    2024-04-04
  • vue项目中常见问题及解决方案(推荐)

    vue项目中常见问题及解决方案(推荐)

    这篇文章主要介绍了vue项目中常见问题及解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-10-10
  • vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

    vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

    为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享在实现过程中遇到问题，需要的朋友一起看看吧
    2020-02-02
  • vuex模块获取数据及方法的简单示例

    vuex模块获取数据及方法的简单示例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论