vue-drawer
介绍
vue组件：抽屉
现在许多第三方组件库都非常完善，如element-ui，但缺少一个重要的功能就是抽屉组件。现在单独开发出此组件，只需要全局声明一下即可使用，简单容易上手。
码云地址：https://gitee.com/yiforget/vue-drawer.git
gitHub地址：https://github.com/yi1104647079/vue-drawer
效果图
image.png
全局注册
import drawer from './drawer/drawer.vue'
Vue.component('drawer', drawer)
使用说明
Attributes
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible.sync | 是否显示Dialog，支持 .sync 修饰符 | boolean | —— | false |
| loading.sync | 是否显示加载图标，支持 .sync 修饰符 | boolean | —— | false |
| loadingColor | 加载图标颜色 | string | —— | #409EFF |
| title | 标题名称 | string | —— | 标题 |
| headerShow | 标题头部是否显示 | boolean | —— | true |
| header-background | 标题头部背景颜色 | string | —— | #fff |
| closeBtnShow | 关闭按钮是否显示 | boolean | —— | true |
| title-color | 标题头部标题 | string | —— | #000 |
| main-background | 内容背景颜色 | string | —— | #fff |
| footerShow | 底部是否显示 | boolean | —— | false |
| footer-height | 底部高度 | string | —— | 60px |
| footer-background | 底部背景颜色 | string | —— | #fff |
| width | 侧栏宽度 | string | —— | 500px |
| height | 侧栏高度 | string | —— | 500px |
| align | 侧栏位置 | string | top,bottom,right,left | right |
| modal | 是否显示遮罩层 | boolean | —— | true |
| close-on-click-modal | 点击遮罩层是否关闭 | boolean | —— | false |
Events
| 事件 | 说明 | 默认值 |
|---|---|---|
| open | Dialog 打开的回调 | —— |
| opened | Dialog 打开动画结束时的回调 | —— |
| close | Dialog 关闭的回调 | —— |
| closed | Dialog 关闭动画结束时的回调 | —— |
slot
| slot | 说明 | 默认值 |
|---|---|---|
| header | 头部操作区的内容 | —— |
| footer | 底部操作区的内容 | —— |
例子 (简单）
<drawer
title="测试"
:visible.sync='dialogVisible'
width="500px"
close-on-click-modal
>
</drawer>
例子（完整属性）
<drawer
:visible.sync='dialogVisible'
:headerShow="true"
header-background="#f5f5f5"
title-color="#000"
main-background="#EBEEF5"
:footerShow="true"
footer-height="60px"
footer-background="#f5f5f5"
width="500px"
align="right"
:modal="true"
close-on-click-modal
:loading.sync="loading"
loadingColor="#ff6700"
@close="text"
@closed="text"
@open="text"
@opend="text"
>
<!--头部-->
<div slot="header">
<p>头部</p>
</div>
<!--内容区-->
<div>
<p>内容</p>
</div>
<!--这里是底部-->
<div slot="footer">
<p>底部</p>
</div>
</drawer>
