简单封装element-ui中的消息提示Message和弹框组件 MessageBox

最新推荐文章于 2024-03-21 14:13:16 发布

ananzhangwei

最新推荐文章于 2024-03-21 14:13:16 发布

阅读量1.3k

点赞数 1

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/ananzhangwei/article/details/126194698

版权

该博客介绍了如何在Vue.js项目中创建并封装`index.js`文件，导入并使用Element-UI的MessageBox和Message组件。通过挂载到Vue.prototype上，可以在整个应用中方便地调用自定义的`$handAlent`和`$handClose`方法，实现全局的消息提示和确认对话框功能。在`main.js`中引入并注册这些方法，然后在组件中直接调用即可实现相应功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创一个index.js文件

import Vue from 'vue'
import { MessageBox,Message } from "element-ui";
Vue.component(Message.name,Message)
Vue.component(MessageBox.name,MessageBox)
//注意不要使用vue.use 不然初次加载会自动调用一次函数
/**
 * @hand this.$handAlent()
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type 
 * @returns {Promise}
*/
export const handAlent=(text='操作成功',type="success")=>{
   
    return Message({
        showClose:true,
        message: text,
        type: type
    })
}
/** 
 * @hand this.$handClose()
 * @author 封装 element-ui 确定取消提示框
 * @param text
 * @param res 确定操作函数
 * @param rej 取消操作函数
 * @returns {Promise}
 * 
*/
export const handClose=(test='是否执行此操作',res,rej)=>{
    MessageBox.confirm(test, '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        res()
      }).catch(() => {
        rej()      
      });
}

二、main.js中挂载在原型上

import Vue from 'vue'
import App from './App.vue'
import {Button} from 'element-ui'
import {handAlent,handClose} from '../src/utils/index'
Vue.config.productionTip = false
//挂载到原型上
Vue.prototype.$handAlent = handAlent
Vue.prototype.$handClose = handClose
Vue.use(Button)
new Vue({
  render: h => h(App),
}).$mount('#app')

三、组件里调用

<template>
  <div id="app">
 <el-button type="primary" @click="alent()">主要按钮</el-button>
  
  </div>
</template>

<script>


export default {
  name: 'App',
  methods:{
    alent(){
      this.$handAlent()
      this.$handClose()
      
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>