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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JavaScript数组复制详解
Feb 02 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
node 版本切换的实现
2020/02/02 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python web框架学习笔记
2016/05/03 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
简历中自我评价范文3则
2013/12/14 职场文书
大学自我鉴定
2013/12/20 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年工会工作总结
2014/11/12 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL