vue3 配合 tsx 优雅的弹窗方案

vue3 配合 tsx 优雅的弹窗方案，通过函数调起组件，这种场景适用于一个页面包含比较多弹窗的场景

方式 1

tool.tsx

方式 2

AddUserForm.vue

方式1和方式2使用

演示

方式3

@/views/file/components/FileRenameModal/index.vue

@/views/file/components/index.ts

使用

<script setup lang="ts">
import { openFileRenameModal } from '../../components/index'
import type { FileItem } from '@/apis'
​
// 重命名 函数调用表单弹窗组件
const rename = (item: FileItem) => {
  openFileRenameModal(item)
}
</script>

Gi Admin Pro 是一个基于 Vue3、Vite、TypeScript、Arco Design Vue、Pinia、VueUse 等的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态数据展示，开箱即用的模板，也可用于学习参考，欢迎star

Gi Admin Pro