forked from opentiny/tiny-vue
81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
||
<div>
|
||
<p>场景1：使用 menu-options 属性定义 children</p>
|
||
<tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
|
||
<p>场景2：使用 options 属性定义 children</p>
|
||
<tiny-dropdown @item-click="itemClick">
|
||
<template #dropdown>
|
||
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
|
||
</template>
|
||
</tiny-dropdown>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue'
|
||
import { iconStarDisable } from '@opentiny/vue-icon'
|
||
import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Modal } from '@opentiny/vue'
|
||
|
||
const options = reactive([
|
||
{
|
||
label: '老友粉1',
|
||
icon: iconStarDisable(),
|
||
children: [
|
||
{
|
||
label: '老友粉2.1',
|
||
children: [{ label: '狮子头3.1' }]
|
||
},
|
||
{ label: '老友粉2.2' },
|
||
{ label: '老友粉2.3', disabled: true }
|
||
]
|
||
},
|
||
{
|
||
label: '狮子头',
|
||
disabled: true
|
||
},
|
||
{
|
||
label: '黄金糕',
|
||
icon: iconStarDisable()
|
||
}
|
||
])
|
||
|
||
const menuOptions = reactive({
|
||
options: [
|
||
{
|
||
label: '老友粉',
|
||
icon: iconStarDisable(),
|
||
children: [
|
||
{
|
||
label: '老友粉2.1',
|
||
children: [{ label: '狮子头3.1' }]
|
||
},
|
||
{ label: '老友粉2.2' },
|
||
{ label: '老友粉2.3', disabled: true }
|
||
]
|
||
},
|
||
{
|
||
label: '狮子头',
|
||
divided: true
|
||
},
|
||
{
|
||
label: '黄金糕',
|
||
divided: true,
|
||
icon: iconStarDisable()
|
||
}
|
||
]
|
||
})
|
||
|
||
const itemClick = (data) => {
|
||
Modal.message({
|
||
message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
p {
|
||
line-height: 1.5;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|