优化事件处理,使外部逻辑更简单
This commit is contained in:
41
src/App.vue
41
src/App.vue
@@ -19,34 +19,43 @@ const listConfig = {
|
|||||||
|
|
||||||
// 自定义菜单项
|
// 自定义菜单项
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ id: 'refresh', label: '刷新列表' },
|
{
|
||||||
{ id: 'clear', label: '清空选择' },
|
id: 'refresh',
|
||||||
{ id: 'export', label: '导出数据' },
|
label: '刷新列表',
|
||||||
|
action: (item) => {
|
||||||
|
console.log('当前选中项:', item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'clear',
|
||||||
|
label: '清空选择',
|
||||||
|
action: (item) => {
|
||||||
|
console.log('清空前选中项:', item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'export',
|
||||||
|
label: '导出数据',
|
||||||
|
action: (item) => {
|
||||||
|
console.log('当前选中项:', item)
|
||||||
|
}
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
// 选中项
|
// 列表项点击事件处理
|
||||||
const selectedItem = ref(null)
|
const handleItemClick = (item) => {
|
||||||
|
console.log('点击列表项:', item)
|
||||||
// 事件处理
|
|
||||||
const handleSelect = (item) => {
|
|
||||||
console.log('Selected:', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMenuClick = (item) => {
|
|
||||||
console.log('Menu clicked:', item)
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ProjectList
|
<ProjectList
|
||||||
v-model:selected="selectedItem"
|
|
||||||
:data="listData"
|
:data="listData"
|
||||||
:config="listConfig"
|
:config="listConfig"
|
||||||
:menu-items="menuItems"
|
:menu-items="menuItems"
|
||||||
:show-toolbar="true"
|
:show-toolbar="true"
|
||||||
:toolbar-height="40"
|
:toolbar-height="40"
|
||||||
@select="handleSelect"
|
@click="handleItemClick"
|
||||||
@menu-click="handleMenuClick"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -22,9 +22,21 @@ const props = defineProps({
|
|||||||
menuItems: {
|
menuItems: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [
|
default: () => [
|
||||||
{ id: 'refresh', label: '刷新列表' },
|
{
|
||||||
{ id: 'clear', label: '清空选择' },
|
id: 'refresh',
|
||||||
{ id: 'export', label: '导出数据' },
|
label: '刷新列表',
|
||||||
|
action: (selectedItem) => console.log('刷新列表', selectedItem)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'clear',
|
||||||
|
label: '清空选择',
|
||||||
|
action: (selectedItem) => console.log('清空选择', selectedItem)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'export',
|
||||||
|
label: '导出数据',
|
||||||
|
action: (selectedItem) => console.log('导出数据', selectedItem)
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// 是否显示工具栏
|
// 是否显示工具栏
|
||||||
@@ -43,7 +55,6 @@ const props = defineProps({
|
|||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'select', // 选中项变化
|
'select', // 选中项变化
|
||||||
'click', // 点击项目
|
'click', // 点击项目
|
||||||
'menu-click', // 点击菜单项
|
|
||||||
'context-menu', // 右键菜单
|
'context-menu', // 右键菜单
|
||||||
'update:selected' // 支持 v-model:selected
|
'update:selected' // 支持 v-model:selected
|
||||||
])
|
])
|
||||||
@@ -93,7 +104,7 @@ const closeMenu = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleMenuClick = (item) => {
|
const handleMenuClick = (item) => {
|
||||||
emit('menu-click', item)
|
item.action?.(selectedItem.value)
|
||||||
closeMenu()
|
closeMenu()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user