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'; // 創(chuàng)建一個id=ft-confirm的容器
      let vnode = createVNode(confirm); // 創(chuàng)建一個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組件的結構如下

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 參數來顯示自定義的確認按鈕。

示例代碼

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 方法中添加一個確認按鈕，并在點擊確認按鈕時執(zhí)行相應的操作。

用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
  // 模態(tài)框對象
  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);
  }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: