forked from opentiny/tiny-vue
112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
||
<div>
|
||
<p>场景1：使用 menu-options 属性配置 tiny-dropdown</p>
|
||
<tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
|
||
<p>场景2：使用 menu-options 和 title 属性配置 tiny-dropdown</p>
|
||
<tiny-dropdown :menu-options="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>
|
||
<p>场景3：使用 menu-options 和 text-field 属性配置 tiny-dropdown</p>
|
||
<tiny-dropdown :menu-options="menuOptions1" text-field="name"></tiny-dropdown>
|
||
<p>场景4：使用 options 属性配置 tiny-dropdown-menu</p>
|
||
<tiny-dropdown>
|
||
<template #dropdown>
|
||
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
|
||
</template>
|
||
</tiny-dropdown>
|
||
<p>场景5：使用 options 和 text-field 属性配置 tiny-dropdown-menu</p>
|
||
<tiny-dropdown>
|
||
<template #dropdown>
|
||
<tiny-dropdown-menu :options="options1" text-field="name"> </tiny-dropdown-menu>
|
||
</template>
|
||
</tiny-dropdown>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { iconStarDisable } from '@opentiny/vue-icon'
|
||
import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
|
||
|
||
const options = ref([
|
||
{
|
||
label: '老友粉',
|
||
disabled: true
|
||
},
|
||
{
|
||
label: '狮子头',
|
||
divided: true
|
||
},
|
||
{
|
||
label: '黄金糕',
|
||
divided: true,
|
||
icon: iconStarDisable()
|
||
}
|
||
])
|
||
const options1 = ref([
|
||
{
|
||
name: '老友粉',
|
||
disabled: true
|
||
},
|
||
{
|
||
name: '狮子头',
|
||
divided: true
|
||
},
|
||
{
|
||
name: '黄金糕',
|
||
divided: true,
|
||
icon: iconStarDisable()
|
||
}
|
||
])
|
||
const menuOptions = ref({
|
||
options: [
|
||
{
|
||
label: '老友粉',
|
||
disabled: true
|
||
},
|
||
{
|
||
label: '狮子头',
|
||
divided: true
|
||
},
|
||
{
|
||
label: '黄金糕',
|
||
divided: true,
|
||
icon: iconStarDisable()
|
||
}
|
||
]
|
||
})
|
||
const menuOptions1 = ref({
|
||
options: [
|
||
{
|
||
name: '老友粉',
|
||
disabled: true
|
||
},
|
||
{
|
||
name: '狮子头',
|
||
divided: true
|
||
},
|
||
{
|
||
name: '黄金糕',
|
||
divided: true,
|
||
icon: iconStarDisable()
|
||
}
|
||
],
|
||
textField: 'name'
|
||
})
|
||
|
||
function itemClick(data) {
|
||
Notify({
|
||
type: 'info',
|
||
title: 'itemData',
|
||
message: `配置式可以通过data.itemData获取配置数据：${JSON.stringify(data.itemData)}`,
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
p {
|
||
line-height: 1.5;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|