Vue 实现展开折叠效果的示例代码


Posted in Javascript onAugust 27, 2018

本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下:

效果如见:

Vue 实现展开折叠效果的示例代码

1.html代码

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>js文本段落展开和收拢效果</title>
  <script type="text/javascript" src="https://3water.com/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
  <div id="container"> 
 <div id="wrap">
 <div>
    <h1>这一段文字是可以折叠展开的,点击下面的“更多”就可以展开,点击下面的“折叠”就可以折叠</h1>
 </div>
 </div>
 <div id="read-more"></div>
  </div>
</body>
 </html>

2.js代码,最关键的

$(function() {
 var slideHeight = 45; // px 定义折叠的最小高度
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight) {
 $('#wrap').css('height', slideHeight + 'px');
 $('#read-more').append('<a href="#" rel="external nofollow" >更多</a>');
 $('#read-more a').click(function() {
  var curHeight = $('#wrap').height();
  if(curHeight == slideHeight) {
  $('#wrap').animate({
   height: defHeight
  }, "normal");
  $('#read-more a').html('折叠');
  } else {
  $('#wrap').animate({
   height: slideHeight
  }, "normal");
  $('#read-more a').html('更多');
  }
  return false;
 });
 }
});

3.css代码

#container {
 margin: 0 auto;
 width: 600px;
 border: 1px solid #3bb2d0;
}
 
#wrap {
 position: relative;
 padding: 10px;
 overflow: hidden;
}
 
#read-more {
 padding: 5px;
 background: #fff;
 color: #333;
}
 
#read-more a {
 padding-right: 22px;
 no-repeat 100% 50%;
 font-weight: bold;
 text-decoration: none;
}
 
#read-more a: hover {
 color: #000;
}

除了使用jQuery的方式实现上述效果,同样可以在Vue实现,下面是解决办法:

1、创建collapse.js文件

const elTransition =
 "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
 "before-enter"(el) {
  el.style.transition = elTransition;
  if (!el.dataset) el.dataset = {};

  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;

  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
 },

 enter(el) {
  el.dataset.oldOverflow = el.style.overflow;
  if (el.scrollHeight !== 0) {
   el.style.height = el.scrollHeight + "px";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  } else {
   el.style.height = "";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }

  el.style.overflow = "hidden";
 },

 "after-enter"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
 },

 "before-leave"(el) {
  if (!el.dataset) el.dataset = {};
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;

  el.style.height = el.scrollHeight + "px";
  el.style.overflow = "hidden";
 },

 leave(el) {
  if (el.scrollHeight !== 0) {
   el.style.transition = elTransition;
   el.style.height = 0;
   el.style.paddingTop = 0;
   el.style.paddingBottom = 0;
  }
 },

 "after-leave"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
 }
};

export default {
 name: "collapseTransition",
 functional: true,
 render(h, { children }) {
  const data = {
   on: Transition
  };
  return h("transition", data, children);
 }
};

2、在.vue组件中引入

<template>
  <div class="container">
    <button @click="isActive = !isActive">展开/折叠</button>
    <collapse>
      <div class="container" v-show="isActive">
        <h2>欢迎大家品尝Pizza!</h2>
        <h5>这里有你非常喜欢的Pizza!</h5>
      </div>
    </collapse>
  </div>
</template>
<script>
import collapse from "../assets/js/collapse.js";
export default {
 data() {
  return {
   isActive: false
  };
 },
 components: {
  collapse
 }
};
</script>

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

Javascript 相关文章推荐
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
vue.js响应式原理解析与实现
Jun 22 #Javascript
JavaScript Canvas实现验证码
Aug 02 #Javascript
JS实现方形抽奖效果
Aug 27 #Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 #Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
You might like
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php比较相似字符串的方法
2015/06/05 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
jquery实用代码片段集合
2010/08/12 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Flask处理Web表单的实现方法
2021/01/31 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
应届生财务会计求职信
2013/11/05 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
mysql 获取相邻数据项
2022/05/11 MySQL