Select 下拉框

选中值的开关

基础用法

当前值为：false

<template>
	<LiSelect
		v-model="val"
		:list="optionList"
		@command="(index: any, item: any) => console.log(index, item)"
	>
	</LiSelect>
	当前值为：{{ val }}
</template>
<script setup lang="ts">
	import { ListData } from "@licht-ui/components";
	import { ref } from "vue";
	const optionList: ListData[] = [
		{
			name: "测试",
			value: "123",
		},
		{
			name: "测试1",
			value: "1234",
		},
		{
			name: "测试2",
			value: "12345",
		},
	];

	const val = ref(false);
</script>

禁用状态

使用disabled控制禁用状态

<template>
	<LiSelect disabled v-model="val"></LiSelect>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const val = ref(false);
</script>

事件

使用command监听选择事件

<template>
	<LiSelect
		v-model="val"
		:list="optionList"
		@command="handleCommand"
	></LiSelect>
</template>
<script setup lang="ts">
	import { ListData } from "@licht-ui/components";
	import { ref } from "vue";
	const optionList: ListData[] = [
		{
			name: "测试",
			value: "123",
		},
		{
			name: "测试1",
			value: "1234",
		},
		{
			name: "测试2",
			value: "12345",
		},
	];
	const val = ref(false);
	const handleCommand = (index: number, data: ListData) => {
		console.log(index, data);
		alert(`index:${index},${JSON.stringify(data)}`);
	};
</script>

Input Attributes

参数	说明	类型	可选值	默认值
disabled	禁用	boolean		false

DropDown Events

事件	参数	说明
command	index: number ，data:DropDownDataItem	可接收点击项的参数