VUE Element-ui Message 消息提示组件自定义封装

为了让message 信息提示的更加方便快捷,减少不同地方的调用,避免代码的重复,特意再官方message 组件的基础上二次封装,使代码更加的优雅和高效。

实现效果:
代码组件:

封装成 message.js 文件,放在 utils 文件夹中,即可按需引用也可以再man.js全局引用。

复制代码
//引入官方组件

import { Message } from 'element-ui'

// 默认参数
const defaultOption = {
    duration: 3000,
    customClass: 'custom-notification',
}

const message = {}

const globalMessage = function (type, msg = '', customOption = {}) {
    return Message({
        ...Object.assign({}, defaultOption, customOption),
        type,
        dangerouslyUseHTMLString: true,
        message: `<p>${msg}</p>`,
    })
}

message.success = function (msg, cpt) {
    return globalMessage('success', msg, cpt)
}
message.error = function (msg, cpt) {
    return globalMessage('error', msg, cpt)
}
message.warning = function (msg, cpt) {
    return globalMessage('warning', msg, cpt)
}

export default message
使用:

1、常规的信息提示

复制代码
this.$message.success('这是一条不会自动关闭的成功消息' || res.data.msg)

this.$message.warning('这是一条不会自动关闭的警告消息' || res.data.msg)

this.$message.error('这是一条不会自动关闭的错误消息' || res.data.msg)

2、个性化传参

复制代码
      this.$message.error(res.data.msg || '这是一条测试的消息', {
          duration: 0, //显示时间, 毫秒。设为 0 则不会自动关闭
          showClose: true, //是否显示关闭按钮
          center: true, //文字是否居中
          customClass: 'custom-notification', //自定义类名
      })

结合官方文档,可自定义传参,满足多场景需求。

相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue