DropDown 下拉菜单

将动作或菜单折叠到下拉菜单中。

基础用法

基础用法

列表0

列表1

列表2

<template>
	<LiDropDown :list="dropdown">
		<LiButton>下拉</LiButton>
	</LiDropDown>
</template>
<script setup lang="ts">
	import { DropdownProp } from "@licht-ui/components";

	const dropdown: DropdownProp["list"] = [];
	for (let i in new Array(3).fill(1).map((_val, index) => index)) {
		dropdown.push({
			id: i.toString(),
			label: "列表" + i,
			data: { id: i },
		});
	}
</script>
<style scope lang="scss"></style>

方向

使用position进行控制，可选值：top、bottom(默认)

列表0

列表1

列表2

列表0

列表1

列表2

列表0

列表1

列表2

<template>
	<LiDropDown :list="dropdown">
		<LiButton>下拉</LiButton>
	</LiDropDown>
	<LiDropDown :list="dropdown" position="bottom">
		<LiButton>下拉</LiButton>
	</LiDropDown>
	<LiDropDown :list="dropdown" position="top">
		<LiButton>下拉</LiButton>
	</LiDropDown>
</template>
<script setup lang="ts">
	import { DropdownProp } from "@licht-ui/components";

	const dropdown: DropdownProp["list"] = [];
	for (let i in new Array(3).fill(1).map((_val, index) => index)) {
		dropdown.push({
			id: i.toString(),
			label: "列表" + i,
			data: { id: i },
		});
	}
</script>
<style scope lang="scss"></style>

触发方式

使用trigger进行控制，可选值：click、hover(默认)

列表0

列表1

列表2

列表0

列表1

列表2

<template>
	<LiDropDown :list="dropdown" position="bottom" trigger="click">
		<LiButton>下拉</LiButton>
	</LiDropDown>
	<LiDropDown :list="dropdown" position="top" trigger="click">
		<LiButton>下拉</LiButton>
	</LiDropDown>
</template>
<script setup lang="ts">
	import { DropdownProp } from "@licht-ui/components";

	const dropdown: DropdownProp["list"] = [];
	for (let i in new Array(3).fill(1).map((_val, index) => index)) {
		dropdown.push({
			id: i.toString(),
			label: "列表" + i,
			data: { id: i },
		});
	}
</script>
<style scope lang="scss"></style>

事件

使用command进行拦截，可接收点击项的参数

列表0

列表1

列表2

<template>
	<LiDropDown :list="dropdown" @command="handleCommand">
		<LiButton>下拉</LiButton>
	</LiDropDown>
</template>
<script setup lang="ts">
	import { DropdownDataItem, DropdownProp } from "@licht-ui/components";

	const dropdown: DropdownProp["list"] = [];
	for (let i in new Array(3).fill(1).map((_val, index) => index)) {
		dropdown.push({
			id: i.toString(),
			label: "列表" + i,
			data: { id: i },
		});
	}

	const handleCommand = (index: number, data: DropdownDataItem) => {
		console.log(index, data);
		alert(`点击项目：${index}\n数据：` + JSON.stringify(data));
	};
</script>
<style scope lang="scss"></style>

DropDown Attributes

参数	说明	类型	可选值	默认值
position	显示位置	string	top/bottom	bottom
trigger	触发方式	string	click/hover	trigger

DropDown Events

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