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
相关推荐
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据1 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
轻口味1 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake2 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区2 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
少年姜太公2 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
初遇你时动了情3 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js