sf-drawer-view 抽屉视图
sf-drawer-view介绍
1.该组件是对el-drawer进行了二次封装；
2.没有传入direction属性，统一抽屉视图是从右到左在最右面打开，有需要可以在SfDrawerView中自行添加；
3.对部分属性默认值进行了修改
注：本文只罗列出封装的一些属性/方法，其余为Element组件原生属性
参照Element-UI官方文档
https://element.eleme.cn/#/zh-CN/component/drawer
sf-drawer-view Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| destroyOnClose | 控制是否在关闭 Drawer 之后将子元素全部销毁 | Boolean | - | true |
| loading | 渲染内容时，是否开启加载状态 | Boolean | - | false |
sf-drawer-view Events
| 事件 | 说明 | 参数 |
|---|---|---|
| open | Drawer 打开的回调 | ------- |
| opened | Drawer 打开动画结束时的回调 | ------- |
| close | Drawer 关闭的回调 | ------- |
| closed | Drawer 关闭动画结束时的回调 | ------- |
sf-drawer-view 组件使用
<template>
<div>
<sf-button type="primary" @click="openView">sf-drawer-view组件</sf-button>
<sf-drawer-view
:visible.sync="drawerViewer"
title="测试SfDrawerView组件"
>
4564981
</sf-drawer-view>
</div>
</template>
<script>
export default {
data() {
return {
drawerViewer: false
}
},
methods: {
openView() {
this.drawerViewer = true
}
}
}
</script>
打开抽屉视图的按钮效果
抽屉视图被打开后的页面效果
