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 事件属性绑定带参数的函数
Mar 13 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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 删除无限级目录与文件代码共享
2008/11/22 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Yii快速入门经典教程
2015/12/28 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
python实现用户答题功能
2018/01/17 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
美的官方商城:Midea
2016/09/14 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
什么是GWT的Entry Point
2013/08/16 面试题
初二政治教学反思
2014/01/12 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
股指期货心得体会
2014/09/13 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
个人年终总结怎么写
2015/03/09 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
python内置模块之上下文管理contextlib
2022/06/14 Python