平时开发中涉及弹窗的情景,一般都会选用dialog组件,其内部封装的相当优雅,方便我们使用;
但是当你的文本内容或表单很长, 亦或是你需要临时展示一些图标或文档,
Dialog
组件可能并不满足我们的需求,这时可以用抽屉组件Drawer来解决问题。
1.啥是抽屉组件?
简单理解就是用来弥补当弹窗内容过多,导致dialog组件不太完美 的场景。
2. 如何使用抽屉组件?
- 基本的element UI引入
/*需要设置 visible 属性,它的类型是 boolean,当为 true 时显示 Drawer。
Drawer 分为两个部分:title 和 body,title 需要具名为 title 的 slot,
也可以通过 title 属性来定义,默认值为空。需要注意的是, Drawer 默认是从右往左打开,
当然可以设置对应的 direction*/
<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>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
和 Dialog
组件一样, Drawer
同样可以在其内部嵌套各种丰富的操作,比如显示表格或表单
还可以通过官方文档定制drawer的显示方式 ,具体可查阅抽屉组件