Drawer 抽屉
有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.
我们通过el-button来显示Drawer,通过visible.sync来控制Drawer的显示状态。通过设置size属性来调整Drawer的宽度。
bash
<el-drawer
title="我是标题"
:visible.sync="drawer"
:size="drawerWidth"
:with-header="false">
<span>我来啦!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawerWidth: '60%' // Drawer宽度
}
}
}
</script>