vue3自定义提示框和下载

1.  confirmInstall.js

首先，确保 proxy.$ftConfirm 方法能够接受 confirmButtonText 参数，并将其传递给 MessageBox 组件。

confirmInstall.js

javascript

import { render, createVNode, ref, reactive } from 'vue'
import confirm from '@/components/MessageBox'export default {install: (app) => {app.config.globalProperties.$ftConfirm = (options) => {const show = ref(true)const wrapper = document.createElement('div')wrapper.id = 'ft-confirm'; // 创建一个id=ft-confirm的容器let vnode = createVNode(confirm); // 创建一个vnodeconst close = () => {// 关闭弹窗移除标签document.body.removeChild(document.getElementById('ft-confirm'));}const dialogProps = reactive({onConfirm: options.onConfirm ? () => { options.onConfirm?.(); close() } : close,onCancel: close,type: options.type,message: options.message,tips: options.tips ? options.tips : '',show: show.value,confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定', // 添加 confirmButtonText 参数});vnode = createVNode(confirm, dialogProps);render(vnode, wrapper); // 渲染组件document.body.appendChild(wrapper); // 添加到body}}
}

2. 修改 MessageBox 组件

确保 MessageBox 组件能够接收并使用 confirmButtonText 参数来显示确认按钮。

假设 MessageBox 组件的结构如下

vue

<template><div v-if="show" class="message-box"><div class="message-box-content"><div class="message-box-header"><span class="message-box-title">{{ type }}</span></div><div class="message-box-message">{{ message }}</div><div class="message-box-tips" v-if="tips">{{ tips }}</div><div class="message-box-buttons"><el-button type="primary" @click="handleConfirm">{{ confirmButtonText }}</el-button><el-button @click="handleCancel">取消</el-button></div></div></div>
</template><script>
export default {props: {onConfirm: {type: Function,default: () => {}},onCancel: {type: Function,default: () => {}},type: {type: String,default: 'info'},message: {type: String,required: true},tips: {type: String,default: ''},show: {type: Boolean,default: false},confirmButtonText: {type: String,default: '确定'}},methods: {handleConfirm() {this.onConfirm();},handleCancel() {this.onCancel();}}
}
</script><style scoped>
.message-box {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}.message-box-content {background: white;padding: 20px;border-radius: 5px;text-align: center;
}.message-box-header {font-size: 18px;font-weight: bold;margin-bottom: 10px;
}.message-box-message {font-size: 16px;margin-bottom: 10px;
}.message-box-tips {font-size: 14px;color: #999;margin-bottom: 20px;
}.message-box-buttons {display: flex;justify-content: space-around;
}
</style>

3. 使用 proxy.$ftConfirm 方法

现在你可以使用 proxy.$ftConfirm 方法，并传递 confirmButtonText 参数来显示自定义的确认按钮。

示例代码

javascript

proxy.$ftConfirm({type: 'success',message: '修改成功',confirmButtonText: '确定', // 设置确认按钮的文本onConfirm: () => {// 跳转到指定页面router.push({ name: '目标页面名称' });},onCancel: () => {// 取消操作（如果需要）}
});

总结

1. 修改 confirmInstall.js：

   • 添加 confirmButtonText 参数到 dialogProps 中，并传递给 MessageBox 组件。

2. 修改 MessageBox 组件：

   • 添加 confirmButtonText 属性，并在模板中使用该属性来显示确认按钮。
   • 确保 handleConfirm 方法调用 onConfirm 回调。

3. 使用 proxy.$ftConfirm 方法：

   • 传递 confirmButtonText 参数来设置确认按钮的文本。
   • 使用 onConfirm 回调来处理确认按钮点击后的逻辑。

通过这些调整，你可以在 proxy.$ftConfirm 方法中添加一个确认按钮，并在点击确认按钮时执行相应的操作。

用element-plus的消息框

在src下的index.js

import tab from './tab'
import auth from './auth'
import cache from './cache'
import modal from './modal'
import download from './download'export default function installPlugins(app){// 页签操作app.config.globalProperties.$tab = tab// 认证对象app.config.globalProperties.$auth = auth// 缓存对象app.config.globalProperties.$cache = cache// 模态框对象app.config.globalProperties.$modal = modal// 下载文件app.config.globalProperties.$download = download
}

modal.js

import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'let loadingInstance;export default {// 消息提示msg(content) {ElMessage.info(content)},// 错误消息msgError(content) {ElMessage.error(content)},// 成功消息msgSuccess(content) {ElMessage.success(content)},// 警告消息msgWarning(content) {ElMessage.warning(content)},// 弹出提示alert(content) {ElMessageBox.alert(content, "系统提示")},// 错误提示alertError(content) {ElMessageBox.alert(content, "系统提示", { type: 'error' })},// 成功提示alertSuccess(content) {ElMessageBox.alert(content, "系统提示", { type: 'success' })},// 警告提示alertWarning(content) {ElMessageBox.alert(content, "系统提示", { type: 'warning' })},// 通知提示notify(content) {ElNotification.info(content)},// 错误通知notifyError(content) {ElNotification.error(content);},// 成功通知notifySuccess(content) {ElNotification.success(content)},// 警告通知notifyWarning(content) {ElNotification.warning(content)},// 确认窗体confirm(content) {return ElMessageBox.confirm(content, "系统提示", {confirmButtonText: '确定',cancelButtonText: '取消',type: "warning",})},// 提交内容prompt(content) {return ElMessageBox.prompt(content, "系统提示", {confirmButtonText: '确定',cancelButtonText: '取消',type: "warning",})},// 打开遮罩层loading(content) {loadingInstance = ElLoading.service({lock: true,text: content,background: "rgba(0, 0, 0, 0.7)",})},// 关闭遮罩层closeLoading() {loadingInstance.close();}
}

download.js

import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { blobValidate } from '@/utils/ruoyi'const baseURL = import.meta.env.VITE_APP_BASE_API
let downloadLoadingInstance;export default {name(name, isDelete = true) {var url = baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDeleteaxios({method: 'get',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() }}).then((res) => {const isBlob = blobValidate(res.data);if (isBlob) {const blob = new Blob([res.data])this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))} else {this.printErrMsg(res.data);}})},resource(resource) {var url = baseURL + "/common/download/resource?resource=" + encodeURIComponent(resource);axios({method: 'get',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() }}).then((res) => {const isBlob = blobValidate(res.data);if (isBlob) {const blob = new Blob([res.data])this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))} else {this.printErrMsg(res.data);}})},zip(url, name) {var url = baseURL + urldownloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })axios({method: 'get',url: url,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() }}).then((res) => {const isBlob = blobValidate(res.data);if (isBlob) {const blob = new Blob([res.data], { type: 'application/zip' })this.saveAs(blob, name)} else {this.printErrMsg(res.data);}downloadLoadingInstance.close();}).catch((r) => {console.error(r)ElMessage.error('下载文件出现错误，请联系管理员！')downloadLoadingInstance.close();})},saveAs(text, name, opts) {saveAs(text, name, opts);},async printErrMsg(data) {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']ElMessage.error(errMsg);}
}