vue3自定义提示框和下载方式

更新时间：2026年02月24日 08:57:07 作者：oxygen-1204

文章介绍了如何在JavaScript中修改`confirmInstall.js`和`MessageBox`组件,以接受并使用`confirmButtonText`参数来显示自定义的确认按钮,通过这些修改,可以使用`proxy.$ftConfirm`方法来传递自定义文本并处理确认按钮点击事件

1.confirmInstall.js

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

confirmInstall.js

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); // 创建一个vnode
      const 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组件的结构如下

<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 参数来显示自定义的确认按钮。

示例代码

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=" + isDelete
    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);
      }
    })
  },
  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 + url
    downloadLoadingInstance = 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);
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中radio单选框如何实现取消选中状态问题
这篇文章主要介绍了vue中radio单选框如何实现取消选中状态问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解Vue 全局引入bass.scss 处理方案
本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue-cli + sass 的正确打开方式图文详解
本文通过图文并茂的形式给大家介绍了vue-cli + sass 的正确打开方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-10-10
vue 动态添加el-input的实现逻辑
这篇文章主要介绍了vue 动态添加el-input的实现代码，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-06-06
vue计算属性computed的使用方法示例
这篇文章主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
2019-03-03
vue computed的传参和element-plus弹窗的显示过程
这篇文章主要介绍了vue computed的传参和element-plus弹窗的显示过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2026-03-03
Vue body样式修改方式
这篇文章主要介绍了Vue body样式修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue3新特性与最佳实践总结与开发技巧
在Vue3中性能优化是提升用户体验的关键,通过合理地利用Vue3的新特性和优化策略,可以显著提升应用的加载速度和运行效率,这篇文章主要介绍了Vue3新特性与最佳实践总结与开发技巧的相关资料,需要的朋友可以参考下
2025-11-11
vue之原生上传图片加水印并压缩图片大小方式
文章介绍了如何使用Vue原生上传图片,并在图片上添加水印并压缩图片大小,首先,安装了相应的插件并进行封装,然后,介绍了添加水印的方法和上传图片的过程,最后,作者分享了自己的经验,并希望对大家有所帮助
2025-01-01
element-ui table表格控件实现单选功能代码实例
这篇文章主要给大家介绍了关于element-ui table表格控件实现单选功能的相关资料,单选框是指在 Element UI 的表格组件中,可以通过单选框来选择一行数据。用户只能选择一行数据,而不能同时选择多行,需要的朋友可以参考下
2023-09-09