1. Drawer抽屜

1.1. 有些時候, Dialog組件并不滿足我們的需求, 比如你的表單很長, 亦或是你需要臨時展示一些文檔, Drawer擁有和Dialog幾乎相同的API, 在UI上帶來不一樣的體驗。

1.2. Drawer Attributes

參數	說明	類型	可選值	默認值
append-to-body	Drawer自身是否插入至body元素上。嵌套的Drawer必須指定該屬性并賦值為true	boolean	無	false
before-close	關閉前的回調, 會暫停Drawer的關閉	function(done), done用于關閉Drawer	無	無
close-on-press-escape	是否可以通過按下ESC關閉Drawer	boolean	無	true
custom-class	Drawer的自定義類名	string	無	無
destroy-on-close	控制是否在關閉Drawer之后將子元素全部銷毀	boolean	無	false
modal	是否需要遮罩層	boolean	無	true
modal-append-to-body	遮罩層是否插入至body元素上, 若為false, 則遮罩層會插入至Drawer的父元素上	boolean	無	true
direction	Drawer打開的方向	Direction	rtl / ltr / ttb / btt	rtl
show-close	是否顯示關閉按鈕	boolean	無	true
size	Drawer窗體的大小, 當使用number類型時, 以像素為單位, 當使用string類型時, 請傳入'x%', 否則便會以number類型解釋	number / string	無	'30%'
title	Drawer的標題, 也可通過具名slot(見下表)傳入	string	無	無
visible	是否顯示Drawer, 支持.sync修飾符	boolean	無	false
wrapperClosable	點擊遮罩層是否可以關閉Drawer	boolean	無	true
withHeader	控制是否顯示header欄, 默認為true, 當此項為false時, title attribute和title slot均不生效	boolean	無	true

1.3. Drawer Slot

name	說明
—	Drawer的內容
title	Drawer標題區的內容

1.4. Drawer Methods

name	說明
closeDrawer	用于關閉Drawer, 該方法會調用傳入的before-close方法

1.5. Drawer Events

事件名稱	說明	回調參數
open	Drawer打開的回調	無
opened	Drawer打開動畫結束時的回調	無
close	Drawer關閉的回調	無
closed	Drawer關閉動畫結束時的回調	無

2. Drawer抽屜例子

2.1. 使用腳手架新建一個名為element-ui-drawer折疊面板的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Drawer from '../components/Drawer.vue' import NoneTitleDrawer from '../components/NoneTitleDrawer.vue' import MyselfDrawer from '../components/MyselfDrawer.vue' import AppendDrawer from '../components/AppendDrawer.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Drawer' },{ path: '/Drawer', component: Drawer },{ path: '/NoneTitleDrawer', component: NoneTitleDrawer },{ path: '/MyselfDrawer', component: MyselfDrawer },{ path: '/AppendDrawer', component: AppendDrawer } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Drawer.vue

<template><div><h1>基本用法</h1><h4>需要設置visible屬性, 它的類型是boolean, 當為true時顯示Drawer。Drawer分為兩個部分: title和body, title需要具名為title的slot, 也可以通過title屬性來定義, 默認值為空。需要注意的是, Drawer默認是從右往左打開, 當然可以設置對應的direction。</h4><el-radio-group v-model="direction"><el-radio label="ltr">從左往右開</el-radio><el-radio label="rtl">從右往左開</el-radio><el-radio label="ttb">從上往下開</el-radio><el-radio label="btt">從下往上開</el-radio></el-radio-group><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">點我打開</el-button><el-drawer title="我是標題" :visible.sync="drawer" :direction="direction" :before-close="handleClose"><span>我來啦!</span></el-drawer></div> </template><script> export default {data () {return {drawer: false,direction: 'rtl'}},methods: {handleClose (done) {this.$confirm('確認關閉?').then(_ => {done()}).catch(_ => {})}} } </script>

2.4. 在components下創建NoneTitleDrawer.vue

<template><div><h1>不添加Title</h1><h4>當遇到不需要title的場景時, 可以通過withHeader這個屬性來關閉掉title的顯示, 這樣可以留出更大的空間給到用戶, 為了用戶的可訪問性, 請務必設定title的值。</h4><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">點我打開</el-button><el-drawer title="我是標題" :visible.sync="drawer" :with-header="false"><span>我來啦!</span></el-drawer></div> </template><script> export default {data () {return {drawer: false}} } </script>

2.5. 在components下創建MyselfDrawer.vue

<template><div><h1>自定義內容</h1><h4>和Dialog組件一樣, Drawer同樣可以在其內部嵌套各種豐富的操作。</h4><el-button type="text" @click="table = true">打開嵌套表格的 Drawer</el-button><el-button type="text" @click="dialog = true">打開嵌套 Form 的 Drawer</el-button><el-drawer title="我嵌套了表格!" :visible.sync="table" direction="rtl" size="50%"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-drawer><el-drawer title="我嵌套了 Form !" :before-close="handleClose" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer" ref="drawer"><div class="demo-drawer__content"><el-form :model="form"><el-form-item label="活動名稱" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活動區域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item></el-form><div class="demo-drawer__footer"><el-button @click="cancelForm">取 消</el-button><el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '確 定' }}</el-button></div></div></el-drawer></div> </template><script> export default {data () {return {table: false,dialog: false,loading: false,gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '80px',timer: null}},methods: {handleClose (done) {if (this.loading) {return}this.$confirm('確定要提交表單嗎?').then(_ => {this.loading = truethis.timer = setTimeout(() => {done()// 動畫關閉需要一定的時間setTimeout(() => {this.loading = false}, 400)}, 2000)}).catch(_ => {})},cancelForm () {this.loading = falsethis.dialog = falseclearTimeout(this.timer)}} } </script>

2.6. 在components下創建AppendDrawer.vue

<template><div><h1>多層嵌套</h1><h4>同樣, 如果你需要嵌套多層Drawer請一定要設置append-to-body屬性為true。</h4><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">點我打開</el-button><el-drawer title="我是外面的 Drawer" :visible.sync="drawer" size="50%"><div><el-button @click="innerDrawer = true">打開里面的!</el-button><el-drawer title="我是里面的" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer"><p>我打...</p></el-drawer></div></el-drawer></div> </template><script> export default {data () {return {drawer: false,innerDrawer: false}},methods: {handleClose (done) {this.$confirm('還有未保存的工作哦確定關閉嗎?').then(_ => {done()}).catch(_ => {})}} } </script>

2.7. 運行項目, 訪問http://localhost:8080/#/Drawer

2.8. 運行項目, 訪問http://localhost:8080/#/NoneTitleDrawer?

2.9. 運行項目, 訪問http://localhost:8080/#/MyselfDrawer?

2.10. 運行項目, 訪問http://localhost:8080/#/AppendDrawer?

總結

以上是生活随笔為你收集整理的052_Drawer抽屉的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。