Vue.js的内容切换组件– Vue Show

Vue.js的内容切换组件– Vue Show
插件名称 vue-show
发布时间 2020年11月16日
插件作者 H2rmone

Vue的无依赖垂直显示/隐藏组件(带有缓动功能)。

安装和下载:

# Yarn
$ yarn add vue-show

# NPM
$ npm install vue-show --save

用法:

import xShow from 'x-show'
import easings from 'easings'
export default {
  name: 'app',
  data: () => ({
    list: [],
    isShow: true,
    easing: Object.keys(easings)[0],
  }),
  components: {
    xShow,
  },
  created () {
    this.list = Object.keys(easings).map(
      key => ({
        key,
        show: true,
        active: false,
      })
    )
    this.list[0].active = true
  },
  methods: {
    handleClick ({ key }, idx) {
      this.easing = key
      this.list.forEach((item, index) => {
        item.active = idx === index
      })
    },
  },
}
<template lang="pug">
  div.app
    h1 Vue Show
    button(
      :class="{'active': isShow}"
      @click="isShow = !isShow"
    ) Click me! Status: {{isShow ? 'show' : 'hide'}}
    x-show.easings(
      :show="isShow"
      :easing="easing"
      :duration="700"
      transition-on-mount
      unmount-on-hide
    )
      ul
        li(v-for="(item, idx) in list")
          button(
            :class="{'active': item.active}"
            @click="handleClick(item, idx)"
          ) {{item.key}}
</template>

Props :

show: {
  type: Boolean,
  default: () => true,
},
transitionProperty: {
  type: String,
  default: () => 'height',
},
duration: {
  type: Number,
  default: () => 500,
},
easing: {
  type: String,
  default: () => 'ease-out',
},
minHeight: {
  type: Number,
  default: () => 0,
},
maxHeight: {
  type: Number,
  default: () => 0,
},
transitionOnMount: {
  type: Boolean,
  default: () => false,
},
unmountOnHide: {
  type: Boolean,
  default: () => false,
},
height: {
  type: Number,
  default: () => 0,
},