Select 选择器

下拉选择。

基础用法

设置 option 组件 value/label/disabled。

控制台

桃子

查看代码

<template>
	<demo-container class="gov-demo-select">
		<gov-select v-model="value">
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";

const options = ref([
	{ label: "西瓜", value: "西瓜" },
	{ label: "桃子", value: "桃子" },
	{ label: "火龙果", value: "火龙果", disabled: true },
	{ label: "葡萄", value: "葡萄" },
	{ label: "橘子", value: "橘子" },
	{ label: "荔枝", value: "荔枝" },
]);

const value = ref(options.value[1].value); // 默认选中桃子
</script>

设置禁用

设置 disabled 后，组件展开的下来会自动关闭。

控制台

桃子

查看代码

<template>
	<demo-container class="gov-demo-select">
		<gov-select v-model="value" disabled>
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";

const options = ref([
	{ label: "西瓜", value: "西瓜" },
	{ label: "桃子", value: "桃子" },
	{ label: "火龙果", value: "火龙果", disabled: true },
	{ label: "葡萄", value: "葡萄" },
	{ label: "橘子", value: "橘子" },
	{ label: "荔枝", value: "荔枝" },
]);

const value = ref(options.value[1].value); // 默认选中桃子
</script>

禁用清空

默认带有清空按钮，你可以设置 clear 为 false 来禁用清空。

控制台

桃子

查看代码

<template>
	<demo-container class="gov-demo-select">
		<gov-select v-model="value" :clear="false">
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
		<template #console>{{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";

const options = ref([
	{ label: "西瓜", value: "西瓜" },
	{ label: "桃子", value: "桃子" },
	{ label: "火龙果", value: "火龙果", disabled: true },
	{ label: "葡萄", value: "葡萄" },
	{ label: "橘子", value: "橘子" },
	{ label: "荔枝", value: "荔枝" },
]);

const value = ref(options.value[1].value); // 默认选中桃子
</script>

设置尺寸

根据 size 设置不同尺寸。

查看代码

<template>
	<demo-container class="gov-demo-select">
		<gov-select v-model="value" size="large">
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
		<br /><br />
		<gov-select v-model="value">
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
		<br /><br />
		<gov-select v-model="value" size="small">
			<gov-select-option
				v-for="option in options"
				:key="option.value"
				:label="option.label"
				:value="option.value"
				:disabled="option.disabled"
			/>
		</gov-select>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";

const options = ref([
	{ label: "西瓜", value: "西瓜" },
	{ label: "桃子", value: "桃子" },
	{ label: "火龙果", value: "火龙果", disabled: true },
	{ label: "葡萄", value: "葡萄" },
	{ label: "橘子", value: "橘子" },
	{ label: "荔枝", value: "荔枝" },
]);

const value = ref(null); // 默认选中桃子
</script>

Select-option Attributes

属性名	说明	类型	可选值	默认值
value	选项的值	String/Number	—	undefined
label	选项的显示文本	String/Number	—	undefined
disabled	是否禁用选项	Boolean	true, false	false

Select-option Slots

插槽名	说明
default	用于自定义选项显示的内容，可以放置如文本或 HTML 结构，默认为 label

Select Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值	String/Number	—	undefined
size	输入框尺寸	String	—	—
placeholder	占位符	String	—	"请输入"
disabled	是否禁用	Boolean	true, false	false
clearable	是否可清空	Boolean	true, false	true
popperHeight	popper 组件的高度	String	—	"200px"
triggerForm	是否触发表单验证(可能会被弃用)	Boolean	true, false	true

Select Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的值
change	值改变时触发	选中的项
focus	输入框获得焦点时触发	—
blur	输入框失去焦点时触发	—
clear	清空按钮点击时触发	—

Select Slots

插槽名	说明
default	用于放置下拉选项内容，可以放置 GovSelectOption 组件实例。