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

需求分析:

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

难点分析:

模块高度不固定。

解决方案:

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、引用此组件
import VerticalToggle from '@/components/Common/VerticalToggle/vertical-toggle.js'
components中注册此组件:
  components: {
    VerticalToggle
  }
data,用于控制显示隐藏:

本demo默认content1收缩,content2展开。

  data () {
    return {
      content1Show: false,
      content2Show: true
    }
  }
在teamplate中引用:

title为点击控制区域,vertical-toggle包裹部分为可不定高度收缩区域。

    <div class="VerticalToggleTest">
      <h2>垂直滑动组件使用方法:</h2>
      <div class="item item1">
        <div class="title" @click="content1Show = !content1Show">标题1</div>
        <vertical-toggle>
          <div class="content-1" v-show="content1Show"></div>
        </vertical-toggle>
      </div>
      <div class="item item2">
        <div class="title" @click="content2Show = !content2Show">标题2</div>
        <vertical-toggle>
          <div class="content-2" v-show="content2Show"></div>
        </vertical-toggle>
      </div>
    </div>

至此,Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。
实现demo效果如文章开头所示。

阅读更多

扫码向博主提问

去开通我的Chat快问

ECMAScripter

博客专家

世上无难bug,只缺有心人。
  • 擅长领域:
  • JavaScript
  • Vue
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/Fabulous1111/article/details/79978545
个人分类: 解决方案 Vue.JS
上一篇Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
下一篇JavaScript数据结构与算法——链表详解(上)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭