052_Drawer抽屉

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抽屉相关推荐

poj2356（抽屉原理）
题意:从输入的N个元素中找出是N的倍数的元素并且输出: 因为这个要求的是连续的数之和,先用sum数组求和:sum[1],sum[1]+sum[2],--,sum[1]+sum[2]+--+sum[n] ...
牛客算法周周练2 B Music Problem（DP，抽屉原理，二进制拆分）
链接:https://ac.nowcoder.com/acm/contest/5203/B 来源:牛客网题目描述 Listening to the music is relax, but for o ...
android中仿qq最新版抽屉,Android实现3种侧滑效果（仿qq侧滑、抽屉侧滑、普通侧滑）...
自己实现了一下侧滑的三种方式(注释都写代码里了) 本文Demo下载地址:Andriod侧滑本文实现所需框架:nineoldandroids下载地址:nineoldandroids 1.普通侧滑: 主 ...
抽屉效果----mmdrawercontroller和viewdeck
2019独角兽企业重金招聘Python工程师标准>>> mmdrawercontroller: 一.滑动手势开关抽屉: 初始化中心视图初始化左/右视图:LeftDrawerTabl ...
iOS开发之抽屉效果实现
说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,今天的博客中用CocoaPods引入PPR ...
POJ 2356 Find a multiple （抽屉原理）
感觉这个题很不错,至少开始真的没想道可以用抽屉原理推出一个结论,然后把这题秒掉.... 已知有n个元素,sum[i]表示从1到i所有数的和...sum[i]%n可以得到一个剩余系,如果出现0,那么结果 ...
fragment 使用抽屉栏的_iPhone 这些使用小技巧，我不说你可能不知道哦
关注扎比的人都知道,扎比分享过很多的 iPhone 使用技巧.虽然 iOS 是一个封闭式的系统,但是其中也有隐藏一些比较少人知道的小技巧哦.今天就整理几个,说不定会很有用. 删除 iMessage 表 ...
鸽巢原理(抽屉原理)的详解
抽屉原理百科名片桌上有十个苹果,要把这十个苹果放到九个抽屉里,无论怎样放,我们会发现至少会有一个抽屉里面放两个苹果.这一现象就是我们所说的"抽屉原理". 抽屉原理的一般含义为: ...
Android开发之Navigationdrawer导航抽屉功能的实现（源代码分享）
导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户可以通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉.导航抽屉覆盖在内容之上,但不覆盖操 ...

052_Drawer抽屉

052_Drawer抽屉相关推荐

最新文章

热门文章