vue elementUI message提示框封装

  • src/utils/message.js
js 复制代码
import { Message, MessageBox } from 'element-ui'
var windowWidth =
    document.documentElement.clientWidth || document.body.clientWidth

export default {
    message (option) {
        const { type, duration, message } = option
        windowWidth =
            document.documentElement.clientWidth || document.body.clientWidth
        Message({
            type: type || 'error',
            customClass: windowWidth <= 1024 ? 'my-message-width' : '',
            duration: duration || 2000,
            message: message
        })
    },

    confrimMessage (option, callback,errback) {
        const {
            type,
            message,
            confirmButtonText,
            cancelButtonText,
            tips,
            showCancelButton,
            showConfirmButton,
            closeOnClickModal
        } = option
        let showCancelButtonStatus =
            showCancelButton === undefined ? true : showCancelButton
        let showConfirmButtonStatus = showConfirmButton === undefined ? true : showConfirmButton
        let msg = !type ? `确定要删除该${message}吗?` : message
        let tipsMsg = tips ? tips : '提示'
        windowWidth =
            document.documentElement.clientWidth || document.body.clientWidth
        MessageBox.confirm(msg, tipsMsg, {
            confirmButtonText: confirmButtonText || '确定',
            cancelButtonText: cancelButtonText || '取消',
            type: type || 'error',
            customClass: windowWidth <= 1024 ? `my-confirm-width ${showConfirmButton === undefined?'':'my-confirm-box-none'}` : (showConfirmButton=== undefined?'':'my-confirm-box-none'),
            cancelButtonClass: 'my-confirm-cancel',
            confirmButtonClass: `my-confirm-confirm ${showConfirmButton === undefined?'':'my-confirm-confirm-none'}`,
            showCancelButton: showCancelButtonStatus,
            showConfirmButton: showConfirmButtonStatus,
            closeOnClickModal:closeOnClickModal===undefined?false:closeOnClickModal
        })
            .then(() => {
                callback()
            })
            .catch(() => {
                errback? errback():''
            })
    },
    promptMessage (option, callback) {
        const {
            type,
            message,
            confirmButtonText,
            cancelButtonText,
            tips,
            showCancelButton,
            inputPattern,
            inputType,
            inputErrorMessage,
            inputValidator,
            closeOnClickModal,
            showConfirmButton
        } = option
        let showCancelButtonStatus =
            showCancelButton === undefined ? true : showCancelButton
        let showConfirmButtonStatus = showConfirmButton === undefined ? true : showConfirmButton
        let msg = !type ? `请输入${message}` : message
        let tipsMsg = tips ? tips : '提示'
        windowWidth =
            document.documentElement.clientWidth || document.body.clientWidth
        MessageBox.prompt(message, tipsMsg, {
            confirmButtonText: confirmButtonText || '确定',
            cancelButtonText: cancelButtonText || '取消',
            customClass: windowWidth <= 1024 ? 'my-prompt-width' : 'my-prompt-box',
            cancelButtonClass: 'my-prompt-cancel',
            inputPlaceholder:msg,
            confirmButtonClass: 'my-prompt-confirm',
            showCancelButton: showCancelButtonStatus,
            showConfirmButton: showConfirmButtonStatus,
            inputPattern: inputPattern || '',
            inputType: inputType || '',
            inputErrorMessage: inputErrorMessage || '',
            inputValidator: inputValidator || function vali () {},
            closeOnClickModal: closeOnClickModal!==undefined?closeOnClickModal:true
        })
            .then((res) => {
                callback(res)
            })
            .catch((err) => {
                console.log(err,'取消')
            })
    }
}
  • 在main.js中使用
js 复制代码
import commonMessage from '@/utils/message'
Vue.prototype.$commonMessage = commonMessage
相关推荐
zhong liu bin9 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
前端 贾公子27 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐28 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
zhangzuying102632 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong95137 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手1 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼6 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one7 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链