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', //自定义类名
      })

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

相关推荐
Danny_FD10 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip15 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济21 分钟前
后端程序员的CSS复习
前端
Enddme24 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员25 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin36 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长1 小时前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架