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
相关推荐
user2975258761219 小时前
使用SSE实现流式渲染实践
前端·javascript
LPieces19 小时前
【LPieces-UI】02-Icon组件的设计与实现
前端·vue.js
卤蛋fg619 小时前
vxe组件 vxe-table 权限控制:通过 permission-code 实现按钮级显隐
vue.js
豆苗学前端19 小时前
【前端内功】同为数据驱动,为什么只有 React 的"心智负担"这么重?(附实战优化指南)
前端·vue.js·面试
铁皮饭盒19 小时前
震惊, Bun突发新版, 重写核心, 换掉了底层Zig
前端·javascript·后端
大力夯19 小时前
macOS 使用 n 模块管理 Node.js 版本
vue.js·macos·node.js
fanzhonghong19 小时前
javaWeb开发之前端实战(Vue工程化+ElementPlus)
前端·javascript·vue.js·后端·spring
openKaka_19 小时前
completeWork:真实 DOM 是在哪里被创建的
前端·javascript·react.js
bbq粉刷匠19 小时前
了解HTML、CSS与JavaScript
javascript·css·html
Wonderful U19 小时前
【前后端】如何使用agent来实现django+vue的前后端开发
vue.js·django