forked from opentiny/tiny-vue
91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<template>
|
||
<div>
|
||
<p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
|
||
|
||
<tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
|
||
<template #dropdown>
|
||
<tiny-dropdown-menu>
|
||
<tiny-dropdown-item
|
||
v-for="(item, index) in options"
|
||
:key="index"
|
||
:label="item.label"
|
||
:disabled="item.disabled"
|
||
:divided="item.divided"
|
||
:icon="item.icon"
|
||
:item-data="item"
|
||
></tiny-dropdown-item>
|
||
</tiny-dropdown-menu>
|
||
</template>
|
||
</tiny-dropdown>
|
||
|
||
<p>场景2：配置式</p>
|
||
<tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
|
||
<template #dropdown>
|
||
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
|
||
</template>
|
||
</tiny-dropdown>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
Dropdown as TinyDropdown,
|
||
DropdownMenu as TinyDropdownMenu,
|
||
DropdownItem as TinyDropdownItem,
|
||
Notify
|
||
} from '@opentiny/vue'
|
||
import { iconStarDisable } from '@opentiny/vue-icon'
|
||
|
||
const options = [
|
||
{
|
||
label: '黄金糕'
|
||
},
|
||
{
|
||
label: '狮子头',
|
||
disabled: true
|
||
},
|
||
{
|
||
label: '螺蛳粉',
|
||
divided: true
|
||
},
|
||
{
|
||
label: '双皮奶',
|
||
icon: iconStarDisable()
|
||
},
|
||
{
|
||
label: '蚵仔煎'
|
||
}
|
||
]
|
||
|
||
const itemClick = (data, vm) => {
|
||
// Aurora主题 item-click 有第二个参数，其他主题只有第一个参数
|
||
const label = vm?.label || data.vm.label
|
||
|
||
Notify({
|
||
type: 'info',
|
||
title: 'itemClick 回调事件',
|
||
message: `使用 dropdown-item 的label属性：${data.vm.label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
|
||
position: 'top-right',
|
||
duration: 2000
|
||
})
|
||
}
|
||
|
||
const buttonClick = () => {
|
||
Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
|
||
}
|
||
|
||
const visibleChange = (status) => {
|
||
Notify({
|
||
message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
|
||
status: 'info'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
p {
|
||
line-height: 1.5;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|