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>
