当前位置：首页 > article >正文

vue3自定义提示框和下载

article 2025/2/13 1:17:51

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); // 创建一个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 参数来显示自定义的确认按钮。

示例代码

javascript

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

总结

修改 confirmInstall.js：
- 添加 confirmButtonText 参数到 dialogProps 中，并传递给 MessageBox 组件。
修改 MessageBox 组件：
- 添加 confirmButtonText 属性，并在模板中使用该属性来显示确认按钮。
- 确保 handleConfirm 方法调用 onConfirm 回调。
使用 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);
  }
}

查看全文

http://www.kler.cn/a/542802.html