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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue实现随机验证码功能的实例代码
Apr 30 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
Vue 技巧之控制父类的 slot
Feb 24 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
基于php实现七牛抓取远程图片
2015/12/01 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript多线程详解
2015/08/12 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
django实现日志按日期分割
2020/05/21 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
活动总结结尾怎么写
2014/08/30 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2016高考寄语集锦
2015/12/04 职场文书