Vue.js的微型抽屉动画导航组件-vue-simple-drawer

Vue.js的微型抽屉动画导航组件-vue-simple-drawer
插件名称 vue-simple-drawer
发布时间 2020年5月6日
插件作者 dreambo8563

一个小巧的Drawer组件,具有Vue.js应用程序的跳动动画。

安装和下载:

# NPM
$ npm install vue-simple-drawer --save

使用:

<template>
  <div id="app">
  <button @click="toggle">toggle</button>
  <Drawer @close="toggle" align="left" :closeable="true">
  <div v-if="open">content here</div>
  </Drawer>
  </div>
  </template>
<script>
  import Drawer from "vue-simple-drawer"
  export default {
  name: "app",
  data() {
  return {
  open: true
  }
  },
  components: {
  Drawer
  },
  methods: {
  toggle() {
  this.open = !this.open
  }
  }
  }
  </script>

Prop:

属性 类型 需要 描述
align String “left”, “up”, “right”, “down”之一,默认为“left”。抽屉的位置。
closeable Boolean 显示x-关闭按钮,默认为true
mask Boolean 显示遮罩层-关闭按钮,默认为true
maskClosable Boolean 单击遮罩层时发出“关闭”事件,默认值:false
zIndex Number 抽屉的z-index值,巢状抽屉的z-index将自动增加,默认值为1000

事记:

事件 参数 需要? 描述
close None 当用户单击x关闭按钮时将被触发

Slot:

Slot名称 描述
default 抽屉中的内容显示可以通过v-if显示/隐藏绘图