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
相关推荐
ssshooter16 分钟前
复古话题:Vue2 的空格间距切换到 Vite 后消失了
前端·vue.js·面试
Van_Moonlight41 分钟前
RN for OpenHarmony 实战 TodoList 项目:任务完成进度条
javascript·开源·harmonyos
Van_Moonlight1 小时前
RN for OpenHarmony 实战 TodoList 项目:深色浅色主题切换
javascript·开源·harmonyos
小贵子的博客1 小时前
Ant Design Vue <a-table>
前端·javascript·vue.js·anti-design-vue
天天进步20151 小时前
【Nanobrowser源码分析4】交互篇: 从指令到动作:模拟点击、滚动与输入的底层实现
开发语言·javascript·ecmascript
console.log('npc')1 小时前
vue2中子组件父组件的修改参数
开发语言·前端·javascript
Van_captain1 小时前
rn_for_openharmony常用组件_Chip纸片
javascript·开源·harmonyos
奋斗吧程序媛1 小时前
vue3 Study(1)
前端·javascript·vue.js
QQ12958455041 小时前
ThingsBoard - APP首页修改为手工选择组织
前端·javascript·物联网·iot
whyfail1 小时前
前端数据存储新选择:IndexedDB与Dexie.js技术指南
前端·javascript·数据库