封装消息提醒（类型，关闭按钮显隐，提示词，是否运用自定义样式，延时）

空白_A

已于 2024-09-10 14:29:45 修改

阅读量241

点赞数 1

文章标签： javascript 前端开发语言

于 2024-09-10 14:20:51 首次发布

本文链接：https://blog.csdn.net/weixin_56933704/article/details/142096953

版权

1、首先在utils文件夹中新建一个js文件:element-message.js

import { Message } from 'element-ui';

const showMessage = {  
    install(Vue) {  
        Vue.prototype.$showMessage = function(type, showClose, message, origin = true, duration,) {  
            // 使用对象映射类型到类名  
            const classMap = {  
                success: 'showmessage-success',  
                info: 'showmessage-info',  
                error: 'showmessage-error',
                warning: 'showmessage-warning' 
            };  
            // 如果传递的origin为true  表示使用element UI 自带的 message样式   否则使用自定义样式
            const className = origin ? '' : classMap[type]; 
            Message({  
                showClose: showClose,  
                message: message,  
                type: type,
                duration: duration,  
                customClass: className 
            });  
        };  
    }  
};  

export default showMessage;

2、在main.js 引入该文件

// 导入/引入
import showMessage from './utils/message';

// 使用
Vue.use(showMessage);

3、这里的信息提示框颜色需要修改使用自定义类名的方式，设置一个全局的样式，需要在使用的页面引入此样式才能生效

在style文件夹中创建一个样式文件：element-message.scss

/* 在你的全局 CSS 文件中 */  
  .showmessage-success {  
    background: #F6FFED;
    box-shadow: 0px 4px 16px 0px rgba(82,196,26,0.16);
    border-radius: 8px;
    border-color: 1px solid #D9F7BE; 
  }  
  .showmessage-error {  
    border-color: 1px solid #fde2e2;
    box-shadow: 0px 4px 16px 0px rgba(196, 26, 26, 0.16);  
    background-color: #fef0f0; 
    color: #f56c6c; 
  }  
  .showmessage-info {  
    border-color: 1px solid #f4f8ff;  
    box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2); 
    background-color: #f4f8ff;  
    color: #409eff;  
  } 
  .showmessage-warning {  
    box-shadow: 0px 4px 16px 0px rgba(230, 160, 60, 0.16);  
    color: rgb(230, 162, 60);
    background-color: #fdf6ec;
    border-color: #faecd8;
  }

4、在页面使用

<template>
</template>
<script>

export default {
  data() {
    return {}
  },
  mounted() {
     // type类型：success、error、warning、info   是否有关闭按钮  是否使用自定义的样式  延时
     this.$showMessage('success', true,'保存成功',true,2000);

     // this.$showMessage('error', true,'显示失败的提示信息',true,2000);
  },

}
</script>