Drawer 抽屉

相较于 Dialog 组件拥有更大操作空间，常用于系统操作区。

基础使用

设置 at 可控制弹出位置。

控制台

 visible: false
 at: left

查看代码

<template>
	<demo-container>
		<div>
			<gov-radio-group button v-model="at">
				<gov-radio value="left">left</gov-radio>
				<gov-radio value="right">right</gov-radio>
				<gov-radio value="top">top</gov-radio>
				<gov-radio value="bottom">bottom</gov-radio>
			</gov-radio-group>
			&nbsp;&nbsp;
			<gov-button @click="visible = true">打开</gov-button>
		</div>
		<hr />
		<gov-drawer v-model="visible" :at="at"> 抽屉内容。 </gov-drawer>
		<template #console>
			visible: {{ visible }}<br />
			at: {{ at }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const at = ref("left");
const visible = ref(false);
</script>

遮罩层

设置 modal 可控制是否有遮罩层； 设置 drawerModal 可控制点击遮罩层是否触发关闭。

控制台

 visible: false
 modal: true
 modalClosable: true

查看代码

<template>
	<demo-container>
		<div>
			<gov-checkbox v-model="modal"> 是否有遮罩层 </gov-checkbox>
			<gov-checkbox v-model="modalClosable">
				遮罩层点击是否触发关闭
			</gov-checkbox>
			&nbsp;&nbsp;
			<gov-button @click="visible = true">打开</gov-button>
		</div>
		<hr />
		<gov-drawer
			v-model="visible"
			:modal="modal"
			:modalClosable="modalClosable"
		>
			抽屉内容。
		</gov-drawer>
		<template #console>
			visible: {{ visible }}<br />
			modal: {{ modal }}<br />
			modalClosable: {{ modalClosable }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
const modal = ref(true);
const modalClosable = ref(true);
</script>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	控制抽屉的显示与隐藏	Boolean	true, false	false
hasClose	是否显示关闭按钮	Boolean	true, false	true
modal	是否显示遮罩层	Boolean	true, false	true
modalClosable	点击遮罩层是否关闭	Boolean	true, false	true
customClass	自定义class	String	—	""
at	抽屉的方向	String	left, right, top, bottom	right
size	抽屉的大小	Number/String	—	"30%"

Events

事件名	说明	回调参数
update:modelValue	更新modelValue值	新的状态
open	抽屉打开时触发	—
opened	抽屉打开动画结束后触发	—
close	抽屉关闭时触发	—
closed	抽屉关闭动画结束后触发	—

Slots

插槽名	说明	作用域插槽	内容
default	抽屉内容	否	可以放置任何自定义的内容，如文本、图标或其他 HTML 结构。