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
相关推荐
Mr.Jessy16 分钟前
JavaScript高级:深浅拷贝、异常处理、防抖及节流
开发语言·前端·javascript·学习
唐叔在学习22 分钟前
30s让ai编写「跳过外链中转页」的油猴脚本
前端·javascript
API技术员1 小时前
item_get_app - 根据ID取商品详情原数据H5数据接口实战解析
javascript
八哥程序员1 小时前
Chrome DevTools 详解系列之 Elements面板
javascript·浏览器
coderHing[专注前端]1 小时前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
UIUV1 小时前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo1001 小时前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
San301 小时前
从零到一:彻底搞定面试高频算法——“列表转树”与“爬楼梯”全解析
javascript·算法·面试
JellyDDD2 小时前
h5上传大文件可能会导致手机浏览器卡死,重新刷新的问题
javascript·上传文件
爱分享的鱼鱼2 小时前
对比理解 Vue 响应式 API:data(), ref、reactive、computed 与 watch 详解
前端·vue.js