Dropdown 下拉菜单

常见的下拉菜单。

基础用法

包裹任意元素，对其做下拉菜单。

控制台

 visible: false

查看代码

<template>
	<demo-container>
		<gov-dropdown v-model="visible">
			<gov-button @click="visible = !visible">下拉菜单</gov-button>
			<template #dropdown>
				<gov-dropdown-item>个人中心</gov-dropdown-item>
				<gov-dropdown-item disabled>联系我们</gov-dropdown-item>
				<gov-dropdown-item divided>退出平台</gov-dropdown-item>
			</template>
		</gov-dropdown>
		<template #console> visible: {{ visible }} </template>
	</demo-container>
</template>

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

参数控制

可设置不同参数控制组件。

下拉方向默认是 bottom 你可以象设置 Popper 组件一样设置不同方向的下拉，在此不做展示。

控制台

 visible: false 
 size: default 
 hideAfterClick: false 
 disabled: false
 center: true

查看代码

<template>
	<demo-container class="gov-demo-dropdown">
		<!-- 控制器 -->
		<div>
			<gov-radio-group button v-model="size">
				<gov-radio value="large">大菜单</gov-radio>
				<gov-radio value="default">默认菜单</gov-radio>
				<gov-radio value="small">小菜单</gov-radio>
			</gov-radio-group>
			&nbsp;&nbsp;&nbsp;
			<gov-checkbox v-model="hideAfterClick">
				点击下拉菜单后是否关闭
			</gov-checkbox>
			<gov-checkbox v-model="disabled">是否禁用</gov-checkbox>
			<gov-checkbox v-model="center">居中布局</gov-checkbox>
		</div>
		<hr />
		<!-- 组件 -->
		<gov-dropdown
			v-model="visible"
			:size="size"
			:hideAfterClick="hideAfterClick"
			:disabled="disabled"
			:center="center"
		>
			<gov-button @click="visible = !visible">下拉菜单</gov-button>
			<template #dropdown>
				<gov-dropdown-item icon="user"> 个人中心 </gov-dropdown-item>
				<gov-dropdown-item icon="phone" disabled>
					联系我们
				</gov-dropdown-item>
				<gov-dropdown-item icon="setting" divided>
					退出平台
				</gov-dropdown-item>
			</template>
		</gov-dropdown>
		<!-- 状态 -->
		<template #console>
			visible: {{ visible }} <br />
			size: {{ size }} <br />
			hideAfterClick: {{ hideAfterClick }} <br />
			disabled: {{ disabled }}<br />
			center: {{ center }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
const size = ref("default");
const hideAfterClick = ref(false);
const disabled = ref(false);
const center = ref(true);
</script>
<style lang="scss">
.gov-demo-dropdown .gov-dropdown-item {
	min-width: 100px;
}
</style>

Dropdown Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定值，控制下拉菜单的显示	Boolean	true, false	—
disabled	是否禁用下拉菜单	Boolean	true, false	false
center	下拉菜单是否居中	Boolean	true, false	false
hideAfterClick	点击后是否隐藏下拉菜单	Boolean	true, false	false
size	下拉菜单的大小	String	—	—

Dropdown Events

事件名	说明	回调参数
update:modelValue	下拉菜单显示状态改变时触发	下拉菜单的显示状态（Boolean）
toggle	下拉菜单显示状态改变时触发	下拉菜单的显示状态（Boolean）

Dropdown Slots

插槽名	说明	作用域插槽	内容
default	触发下拉菜单的元素	否	—
dropdown	下拉菜单的内容	否	—

DropdownItem Attributes

属性名	说明	类型	可选值	默认值
divided	是否显示分隔线	Boolean	true, false	false
disabled	是否禁用该项	Boolean	true, false	false
icon	项前的图标名称	String	—	—
content	下拉菜单项的内容	String	—	—
size	下拉菜单项的大小	String	—	—
center	内容是否居中	Boolean	true, false	false
hideAfterClick	点击后是否隐藏下拉菜单	Boolean	true, false	false

DropdownItem Events

事件名	说明	回调参数
click	点击下拉菜单项时触发	—

DropdownItem Slots

插槽名	说明	作用域插槽	内容
default	下拉菜单项的内容，如果提供了 `content` 属性，则此插槽将被忽略	否	—