Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件


Posted in Javascript onJune 19, 2018

需求分析:

如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用? 

 点击红框前:

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件 

 点击后:

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

难点分析:

模块高度不固定。比如,本人一开始想到的方法如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      height:500px;
      background-color:black; 
       overflow: hidden;            
    }
    .mybox-leave-active,.mybox-enter-active{
      transition: all 1s ease; 
    }
    .mybox-leave-active,.mybox-enter{
      height:0px !important;
    }
    .mybox-leave,.mybox-enter-active{
      height: 500px;
    }
  </style>
</head>
<body>
<div id="box">
  <transition name="mybox">
    <div class="box" v-show="boxshow"></div>
  </transition>
  <button @click="togglebox">按钮</button>
</div>
</body>
<script src="../bower_components/vue/dist/vue.js"></script>
<script>
  new Vue({
    el:'#box',
    data:{
      boxshow:false
    },
    methods:{

      togglebox:function(){
        this.boxshow = !this.boxshow;
      }
    }   
  });
</script>
</html>

这种方法确实可以实现点击展开,再次点击收缩的需求,但是有一个明显的缺点:限定了容器的高度,也就是每个模块都需要固定高度,并不适用于需求场景。

解决方案:

1、实现一个函数式组件

本人命名为vertical-toggle.js
// Created by xiaoqiang on 17/04/2018.
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: 'VerticalToggle',
 functional: true,
 render (h, { children }) {
  const data = {
   on: Transition
  }
  return h('transition', data, children)
 }
}

2、引用此组件

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件 

 在components中注册了此组件:

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

即可在teamplate中引用,请留意红框文字说明部分。

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件 

至此,Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。 

 实现效果:

Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件

总结

以上所述是小编给大家介绍的Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
微信小程序 navbar实例详解
May 11 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 #Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 #Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 #Javascript
vue异步加载高德地图的实现
Jun 19 #Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 #Javascript
JS正则表达式常见用法实例详解
Jun 19 #Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
华三通信H3C面试题
2015/05/15 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
期中考试反思800字
2014/05/01 职场文书
学术会议通知
2015/04/15 职场文书
《鲸》教学反思
2016/02/23 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers