vue-drawer-component

一个基于vue实现的抽屉组件

点击查看在线demo

Install

npm install vue-drawer-component -S

Quick Start

import VueDrawer from 'vue-drawer-component'
import 'vue-drawer-component/src/index.css'
 
Vue.component(VueDrawer.name, VueDrawer)

基础用法

<template>
  <div>
    <vue-drawer :visible.sync="visible">
      <div slot="header">
        Basic Drawer
      </div>
      <div slot="body">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </vue-drawer>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      visible: false
    }
  }
}
</script> 

API

Props:

属性	说明	类型	默认值
visible	是否显示抽屉	Boolean	false
placement	抽屉的方向	'top'	'right'
header-footer-fixed	头部与底部是否固定	Boolean	true
mask-closable	点击蒙层是否允许关闭	Boolean	true
mask	是否展示遮罩	Boolean	true
width	宽度	String, Number	256
height	高度, 在 placement 为 top 或 bottom 时使用	String, Number	256
zIndex	设置 Drawer 的 z-index	Number	1000
afterClose	关闭之后的回调	Function	--
beforeClose	关闭之前的回调，可用于做拦截，一定要调用next钩子	Function(next)	--

作者wx: ckang1229