Drawer 抽屉
代码演示
基础用法
drawer组件实际上是一个容器组件, 需要展示的内容, 全权由 slot 传入。
查看代码 < />
<template>
<w-button type="primary" @click="visible = true">open</w-button>
<w-drawer :visible.sync="visible" @onClose="handleClose">
<!-- slot -->
<div class="content-container">
<h2>Drawer的基础用法</h2>
<ul>
<li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
<li>默认点击遮罩部分关闭抽屉;</li>
<li>通过<strong>slot</strong>的方式向抽屉传入需要展示的内容;</li>
</ul>
</div>
</w-drawer>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
handleClose () {
this.visible = false
}
}
}
</script>
<style scoped lang="scss">
.drawer-demo {
.content-container {
width: 260px;
h2 {
font-size: 16px;
}
ul li {
font-size: 14px;
color: #666;
}
li + li {
margin-top: 10px;
}
}
}
</style>选择位置
抽屉是 fixed定位, 默认从视窗左侧打开, 可以通过改动 position属性, 传入 top /bottom / left / right来指定抽屉的位置。
查看代码 < />
<template>
<w-radio-group v-model="position">
<w-radio label="top">top</w-radio>
<w-radio label="right">right</w-radio>
<w-radio label="bottom">bottom</w-radio>
<w-radio label="left">left</w-radio>
</w-radio-group>
<w-button type="primary" @click="visible = true">open</w-button>
<w-drawer :position="position" :visible.sync="visible" @onClose="handleClose">
<div class="content-container">
<!-- slot -->
<h2>Drawer的位置 position = "{{position}}"</h2>
<ul>
<li>抽屉默认出现的位置在左侧, 即 position = "left";</li>
<li>position的其他可选值为: "right", "top", "bottom";</li>
<li>更多参数请查看参数配置说明;</li>
</ul>
</div>
</w-drawer>
</template>
<script>
export default {
data () {
return {
position: 'left',
visible: false
}
},
methods: {
handleClose () {
this.visible = false
}
}
}
</script>
<style scoped lang="scss">
.drawer-demo {
.content-container {
width: 260px;
h2 {
font-size: 16px;
}
ul li {
font-size: 14px;
color: #666;
}
li + li {
margin-top: 10px;
}
}
}
</style>关闭拦截
beforeClose参数，用于拦截关闭抽屉的动作，可以用于处理一些在关闭之前需要处理的事件。
查看代码 < />
<template>
<w-button type="primary" @click="visible = true">open</w-button>
<w-drawer
:visible.sync="visible"
:before-close="beforeCloseHandler">
<div class="content-container">
<!-- slot -->
<h2>Drawer的基础用法</h2>
<ul>
<li>点击触发按钮打开抽屉, 抽屉默认位置在左侧;</li>
<li>默认点击遮罩部分关闭抽屉;</li>
<li>通过<strong>slot</strong>的方式向抽屉传入需要展示的内容;</li>
</ul>
</div>
</w-drawer>
</template>
<script>
export default {
data () {
return {
visible: false
}
},
methods: {
beforeCloseHandler (done) {
this.$confirm('是否确认关闭 drawer?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
done()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
}
}
</script>
<style scoped lang="scss">
.drawer-demo {
.content-container {
width: 260px;
h2 {
font-size: 16px;
}
ul li {
font-size: 14px;
color: #666;
}
li + li {
margin-top: 10px;
}
}
}
</style>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| before-close | 关闭之前的回调, 会拦截抽屉的关闭操作 | Function | function (done) {}, 确认关闭时，调用 done 即可 | — | v1.6.0 |
| closeOnClickModal | 是否可以点击遮罩关闭drawer, 默认可以 | Boolean | — | true | v1.4.13 |
| drawerClass | 为drawer组件添加class | String | — | — | |
| destroy-on-close | 是否在关闭drawer时摧毁子元素 | boolean | — | false | v1.6.0 |
| modal | 是否显示遮罩, 默认显示 | Boolean | — | true | v1.4.13 |
| position | 抽屉出现的位置 | String | top/right/bottom/left | left | |
| visible | 抽屉的显示与隐藏控制参数，是否显示 Drawer，v1.4.13以上版本支持 .sync 修饰符 | Boolean | — | false | |
| size | drawer 窗口内容的大小，当抽屉方向为left, right时，size 限制窗体宽度，当抽屉方向为top, bottom时，size 限制的是窗体的高度。 | string | — | 320px | v1.6.0 |
Methods
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| handleCloseDrawer | 关闭drawer(before-close 仍有效) | — | v1.6.0 |
Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| onClose | 关闭drawer时触发 | — | |
| onOpen | 打开drawer时触发 | — |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |