在多个视图组件中添加动态按钮功能,支持不同操作的弹窗显示,优化按钮显示逻辑以提升用户交互体验。

This commit is contained in:
jxxghp
2025-04-20 14:30:39 +08:00
parent 87c11eda46
commit 1ffcfe643c
4 changed files with 40 additions and 6 deletions

View File

@@ -5,7 +5,7 @@ import { useDisplay } from 'vuetify'
import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue'
import NoDataFound from '@/components/NoDataFound.vue'
import { useDynamicButton } from '@/composables/useDynamicButton'
// APP
const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value
@@ -42,11 +42,17 @@ onMounted(() => {
onActivated(() => {
fetchData()
})
</script>
// 使用动态按钮钩子 新增
useDynamicButton({
icon: 'mdi-plus',
onClick: () => {
addDialog.value = true
},
})
</script>
<template>
<div>
<VPageContentTitle title="工作流" />
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VRow v-if="workflowList.length > 0" class="match-height">
@@ -64,7 +70,7 @@ onActivated(() => {
<!-- 新增按钮 -->
<VFab
v-if="isRefreshed"
v-if="isRefreshed && !appMode"
icon="mdi-plus"
location="bottom"
size="x-large"