Vuetify 3中如何通过Composable程序化关闭v-dialog（CRUD场景）

1. 在组合式函数中添加对话框控制逻辑 #

修改useRoleOperations.ts，新增响应式变量控制对话框可见性，并在保存成功后触发关闭操作：

// useRoleOperations.ts
import { ref } from 'vue';
import type { Role } from '@/types';

export function useRoleOperations() {
  const isDialogOpen = ref(false);
  const currentRole = ref<Role | null>(null);

  // 打开对话框（支持传参编辑已有角色）
  const openDialog = (role?: Role) => {
    currentRole.value = role ? { ...role } : null;
    isDialogOpen.value = true;
  };

  // 关闭对话框并重置表单数据
  const closeDialog = () => {
    isDialogOpen.value = false;
    currentRole.value = null;
  };

  // 保存角色到服务器
  const saveRole = async () => {
    try {
      // 根据currentRole是否存在，区分新增/编辑请求
      if (currentRole.value) {
        // 执行编辑接口：await api.updateRole(currentRole.value);
      } else {
        // 执行新增接口：await api.createRole(currentRole.value);
      }
      // 保存成功后自动关闭对话框
      closeDialog();
      // 可额外添加刷新角色列表等逻辑
    } catch (error) {
      console.error('角色保存失败:', error);
      // 这里可以添加错误提示逻辑
    }
  };

  return {
    isDialogOpen,
    currentRole,
    openDialog,
    closeDialog,
    saveRole
  };
}

2. 在组件中绑定对话框状态 #

修改RoleOperations.vue，将v-dialog的显示状态与组合式返回的变量绑定，并调用对应方法：

<template>
  <div>
    <!-- 新增角色按钮 -->
    <v-btn @click="openDialog">新增角色</v-btn>

    <!-- 列表中的编辑按钮（示例） -->
    <v-btn 
      v-for="role in roles" 
      :key="role.id" 
      @click="openDialog(role)"
    >
      编辑
    </v-btn>

    <!-- 承载表单的对话框 -->
    <v-dialog
      v-model="isDialogOpen"
      max-width="500px"
    >
      <v-card>
        <v-card-title>{{ currentRole ? '编辑角色' : '新增角色' }}</v-card-title>
        <v-card-text>
          <!-- 表单字段示例 -->
          <v-text-field
            v-model="currentRole?.name"
            label="角色名称"
            required
          />
          <!-- 其他表单字段 -->
        </v-card-text>
        <v-card-actions>
          <v-btn @click="closeDialog">取消</v-btn>
          <v-btn @click="saveRole" color="success">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoleOperations } from '@/composables/useRoleOperations';

// 示例角色列表数据
const roles = ref([
  // { id: 1, name: '管理员' },
  // ...其他角色
]);

const {
  isDialogOpen,
  currentRole,
  openDialog,
  closeDialog,
  saveRole
} = useRoleOperations();
</script>

核心逻辑说明 #

• 通过v-model="isDialogOpen"实现对话框显示状态的双向绑定，组合式函数和组件都能控制其开关。
• 保存成功后调用closeDialog()，自动关闭对话框并清空表单数据，避免残留旧数据影响下一次操作。
• 所有业务逻辑（打开/关闭对话框、保存请求）都封装在组合式函数中，组件只需调用暴露的方法，符合关注点分离原则。

内容的提问来源于stack exchange，提问作者shazim ali