Vue3全局挂载Dialog组件

一、背景描述

最近项目中遇到了全局挂载Dialog的需求,在这里记录一下,希望可以帮到大家。

二、Dialog组件封装

Dialog组件结构如下:

2.1 Dialog.vue
javascript 复制代码
<template>
  <!-- 删除文件对话框 -->
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
		:before-close="handleBeforeClose"
  >
    <div>{{ title }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button
          type="primary"
          :loading="sureBtnLoading"
          @click="handleDialogSure"
          >确 定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  ref,
  computed
} from 'vue'
import {
  deleteFile
} from '@/api/file'
import { ElMessage } from 'element-plus';

const props = defineProps({
  fileInfo: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "550px",
  },
  saveClick: {
    type: Function,
    default: () => {},
  },
  cancelClick: {
    type: Function,
    default: () => {},
  },
  remove: {
    type: Function,
    default: () => {},
  }
})

const dialogVisible = ref(false) // 窗体显示控制
const dialogWidth = computed(() => {
  return props.width || "550px"
})
const dialogTitle = computed(() => {
  return props.title || '删除文件'
})

const title = computed(() => {
  return '此操作将永久删除, 是否继续?'
})

const sureBtnLoading = ref(false)
// 关闭回调触发事件
const handleBeforeClose = (done) => {
  done()
}
// 取消按钮点击事件
const handleDialogClose = () => {
  props.cancelClick()
  props.remove()
}
// 确定按钮点击事件
const handleDialogSure = () => {
	sureBtnLoading.value = true
  deleteFile({
    id: props.fileInfo.id
  })
    .then((res) => {
      sureBtnLoading.value = false
      ElMessage.success(res.data || '删除成功')
      props.saveClick()
      props.remove()
    })
    .catch(() => {
      sureBtnLoading.value = false
    })
}
</script>
2.2 index.js
javascript 复制代码
import DeleteFileDialog from './Dialog.vue'
import { createApp } from 'vue'

let mountNode
let createMount = (opts) => {
	if(mountNode){ // 确保只存在一个弹框
		document.body.removeChild(mountNode)
    mountNode = null
	}
  mountNode = document.createElement('div')
  document.body.appendChild(mountNode)
  const app = createApp(DeleteFileDialog, {
    ...opts,
    modelValue: true,
    remove() { // 传入remove函数,组件内可移除dom 组件内通过props接收
      app.unmount(mountNode)
      document.body.removeChild(mountNode)
      mountNode = null
    }
  })
  return app.mount(mountNode)
}
function DeleteFile(options = {}) {
  options.id = options.id || 'deleteFile_' + 1 //唯一id 删除组件时用于定位
  let $init = createMount(options)
  return $init
}
DeleteFile.install = app => {
  app.component('delete-file-dialog', DeleteFileDialog)
  app.config.globalProperties.$deleteFileDialog = DeleteFile
}
export default DeleteFile

三、全局挂载Dialog组件

在main.js中进行全局挂载

javascript 复制代码
import DeleteFileDialog from '@/components/dialog/deleteFile/index.js'
app.use(DeleteFileDialog)

四、使用Dialog组件

javascript 复制代码
proxy.$deleteFileDialog({
    fileInfo: fileInfo,
    saveClick: () => {
		console.log('saveClick---')
	},
	cancelClick: () => {
		console.log('cancelClick---')
	}
})

五、效果图

相关推荐
!win !19 分钟前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss
前端极客探险家27 分钟前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
oscar9991 小时前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~1 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
利刃之灵1 小时前
03-HTML常见元素
前端·html
kidding7231 小时前
gitee新的仓库,Vscode创建新的分支详细步骤
前端·gitee·在仓库创建新的分支
听风吹等浪起1 小时前
基于html实现的课题随机点名
前端·html
leluckys1 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding7232 小时前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
微学AI2 小时前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp