Vue 自定义折叠/展开组件– Vue Collapse Transition

Vue 自定义折叠/展开组件– Vue Collapse Transition
插件名称 Vue Collapse Transition
版本号 v1.0.2
发布时间 2020年4月10日
插件作者 ivanvermeyen

一个自定义折叠过渡组件,可通过自动高度和自动宽度支持平稳地扩展和折叠元素。

变更日志:

v1.0.2(04/10/2021)

  • 实际构建最后一个修复程序

v1.0.1(04/08/2021)

  • 修复Nuxt未定义全局窗口的问题

v1.0.0(02/09/2021)

  • 转换后清除缓存的尺寸
  • 发射过渡事件

2020年9月29日

  • 过渡后清除缓存的样式

安装:

# NPM
$ npm install @ivanv/vue-collapse-transition --save

使用:

1.安装并导入Vue折叠过渡组件。

import CollapseTransition from 'CollapseTransition'

2.在模板中创建CollapseTransition组件。

<collapse-transition>
  <ul v-show="isOpen">
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  <li>演示信息!</li>
  </ul>
</collapse-transition>

3.启用组件。

export default {
  data() {
    return {
      isOpen = false, // 默认关闭
    }
  }
}

4.该组件还支持水平折叠。

<collapse-transition dimension="width">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>

5.配置动画的持续时间。

<collapse-transition :duration="300">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>

6.对过渡应用缓动功能。

<collapse-transition easing="ease-in-out">
  <ul v-show="isOpen">
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li> 
<li>演示信息!</li>
  </ul>
</collapse-transition>