下拉菜单 Dropdown

树状层级结构展示信息，可展开或折叠。

静态组件渲染

组件元素添加".open-dropdown-border"，定义带边框下拉框

无边框下拉

• 选项一
• 选项二
• 选项三

有边框下拉

• 选项一
• 选项二
• 选项三

查看代码

<div class="open-container open-container-horizontal">
	<div class="open-dropdown open-col-4">
		<div class="open-dropdown-title">无边框下拉</div>
		<ul class="open-dropdown-list">
			<li class="open-dropdown-item" data-id="1">选项一</li>
			<li class="open-dropdown-item" data-id="2">选项二</li>
			<li class="open-dropdown-item" data-id="3">选项三</li>
		</ul>
	</div>
	<div class="open-dropdown open-dropdown-border open-col-4">
		<div class="open-dropdown-title">有边框下拉</div>
		<ul class="open-dropdown-list">
			<li class="open-dropdown-item" data-id="1">选项一</li>
			<li class="open-dropdown-item" data-id="2">选项二</li>
			<li class="open-dropdown-item" data-id="3">选项三</li>
		</ul>
	</div>
</div>

动态组件渲染

查看代码

<div class="open-container">
	<div id="dropdown" style="width: 200px;"></div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(()=>{

		// 下拉列表菜单数据
		const data = [
			{
				id: 1,
				text: '选项一'
			},
			{
				id: 2,
				text: '选项二'
			},
			{
				id: 3,
				text: '选项三'
			}
		];

		// 渲染数据
		openui.dropdown.render({
			id: '#dropdown',     // 容器选择器
			title: '下拉框',  // 标题
			data:data,       // 数据
			click: function(res){
				console.log(res)// 获取点击的值
			}
		})
	})
	
</script>

API

API	描述
dropdown.render(options)	动态渲染
dropdown.renderStatic()	静态渲染
dropdown.on(id,()={})	事件监听

动态渲染

dropdown.render(options)

• 参数options:基础属性配置

属性名	描述	类型	必填	默认值
id	dom选择器	string	是	-
title	下拉框标题	string	是	-
data	下拉列表数据	array	是	-

• 回调函数

options.click 下拉列表触发时的回调函数

// 返回选择的数据
click: function(res){
	console.log(res)
}

静态渲染

dropdown.renderStatic()

默认会获取符合约定的组件dom模版进行渲染

事件监听

dropdown.on(id,(res)=>{})

// 静态组件，动态组件都会触发
dropdown.on(id,(data)=>{
	console.log(data)
})