Drawer 抽屉

Drawer 抽屉

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

TIP

1.0.4+

<el-button @click="dialogVisible=true">打开</el-button>
<avue-drawer title="提示" show-close v-model="dialogVisible" :before-close="handleClose">
  这里是内容
</avue-drawer>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(hide) {
      this.$message.success('关闭')
      hide();
    }
  }
}
</script>

Variables

参数	说明	类型	可选值	默认值
title	Drawer 的标题，也可通过具名 slot （见下表）传入	string	—	—
width	Drawer 的宽度	string	—	300
fullscreen	是否为全屏 Drawer	boolean	—	false
placement	Drawer 的方向	string	left/right	right
modal	是否需要遮罩层	boolean	—	true
close-on-click-modal	是否可以通过点击 modal 关闭 Drawer	boolean	—	true
custom-class	Drawer 的自定义类名	string	—	-
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Drawer 的关闭	function(done)，done 用于关闭 Drawer	—	-

Scoped Slot

name	说明
—	Drawer 的内容
title	Drawer 标题区的内容

Events

事件名	说明	参数
open	Drawer 打开的回调	-
close	Drawer 关闭的回调	-