向上滑动/下拉Vue动画– v-show-slide

向上滑动/下拉Vue动画– v-show-slide
插件名称 v-show-slide
发布时间 2020年4月23日
插件作者 phegman

v-show-slide是Vue.js指令,用于显示/隐藏具有可配置的上/下动画的元素。

安装和下载:

# Yarn
$ yarn add v-show-slide

# NPM
$ npm install v-show-slide --save

使用:

1.导入并注册指令

import VShowSlide from 'v-show-slide'
Vue.use(VShowSlide)

2.使用指令。

<template>
  <div id="app" class="app">
    <ul id="features" v-show-slide="featuresOpen" class="features">
      <li>内容 1</li>
      <li>内容 2</li>
      <li>内容 3</li>
    </ul>
    <button
      @click="toggleFeatures"
      class="toggle-features"
      aria-controls="features"
      :aria-expanded="featuresOpen ? 'true' : 'false'"
    >
      {{ featuresOpen ? '隐藏' : '显示' }}
    </button>
  </div>
</template>
export default {
  name: 'App',
  data() {
    return {
      featuresOpen: false,
    }
  },
  methods: {
    toggleFeatures() {
      this.featuresOpen = !this.featuresOpen
    },
  },
}