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

原创 2018年04月17日 18:28:01

需求分析:

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

难点分析:

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

<!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、引用此组件

这里写图片描述
components中注册了此组件:
这里写图片描述

即可在teamplate中引用,请留意红框文字说明部分。
这里写图片描述
至此,Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。
实现效果:
这里写图片描述

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/Fabulous1111/article/details/79978545

用Borland C# Builder制作不规则窗体

徐长友   悠游在线作不规则窗体涉及到API的调用和大量的编程,是件很复杂的事情。下面我们可以使用Borland C# Builder轻松的实现一个不规则窗体,以下面用一个示例来讲述其制作过程。一.准...
  • yousoft
  • yousoft
  • 2003-08-27 21:47:00
  • 1382

Vue2(三)实现子菜单展开收缩,带动画效果

以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图: 点开效果:...
  • weiyongliang_813
  • weiyongliang_813
  • 2018-01-01 18:00:55
  • 1190

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

需求分析: 如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用? 点击红框前: 点击后: 难...
  • Fabulous1111
  • Fabulous1111
  • 2018-04-17 18:28:01
  • 183

vue 展开收起动画

最近在开发项目过程中遇到一个比较棘手的问题,那就是css3在webview中的兼容性问题。导致第三方组件在低版本手机浏览器中样式错乱(高版本显示正常),无奈之下使用css2解决了样式问题,但是,原本组...
  • mhlghy
  • mhlghy
  • 2018-04-11 12:01:48
  • 43

vue2.0 transition -- 动画使用心得

实践这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。1.css过渡–实践先来看看demo效果: 这个案...
  • lhb_11
  • lhb_11
  • 2017-09-01 14:27:59
  • 656

<em>Vue</em>.js 2 Cookbook 2017年出版760页

<em>Vue</em>&#39;s built-in <em>transition</em> system Use <em>Vue</em>x and Webpack to build medium-......<em>展开收缩</em> 综合评分:0 收藏评论举报 所需: 5积分/C币 下载个数: 7 开通...
  • 2018年04月15日 00:00

Vuejs——(7)过渡(动画)

本篇资料来于官方文档: http://cn.vuejs.org/guide/transitions.html 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,...
  • qq20004604
  • qq20004604
  • 2016-09-04 23:03:12
  • 3120

vue2.0中css过渡动画总结

vue2.0中css过渡动画总结vue.2.0中的过渡动画利用自身的transition组件实现,有四种情形可以实现过渡效果 利用v-if渲染元素时 利用v-show展示或者隐藏元素时应用过渡生效 动...
  • u012713450
  • u012713450
  • 2017-06-26 22:26:25
  • 1734

vue简易指引用户向下翻阅悬浮效果箭头实现

在组件mounted阶段,给屏幕添加屏幕滚动监听事件: mounted: function () {       window.addEventListener('scroll', this.menu...
  • theoneEmperor
  • theoneEmperor
  • 2017-09-20 19:57:11
  • 854

vue页面出现正在加载的初始页面与实现动画效果

我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 ...
  • gang456789
  • gang456789
  • 2017-09-19 09:56:35
  • 1499
收藏助手
不良信息举报
您举报文章:Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
举报原因:
原因补充:

(最多只允许输入30个字)