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学习笔记2 函数
Jan 11 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
JS面向对象编程浅析
Aug 28 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
vuex存储token示例
Nov 11 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通用检测函数集合
2006/11/25 PHP
一篇入门的php Class 文章
2007/04/04 PHP
php include,include_once,require,require_once
2008/09/05 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP函数积累总结
2019/03/19 PHP
php fread函数使用方法总结
2019/05/28 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
javascript 写类方式之九
2009/07/05 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
Javascript复制实例详解
2016/01/28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python实现微信自动回复功能
2018/04/11 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
企业计划生育责任书
2015/05/09 职场文书