vue项目中对elementUI Messages消息提示框和确认提示框进行封装,能够全局使用
vue项目中对elementUI Messages消息提示框和确认提示框进行封装,能够全局使用
·
vue项目中对elementUI Messages消息提示框和确认提示框进行封装,能够全局使用
1、在src下新建一个mixins文件夹
2、在文件夹下新建一个message.js文件和index.js文件、
如下图所示:
message.js中封装代码如下:
export default{
methods:{
// 消息提示
messageBox(message,type,userHTML,showClose,duration){
const msgInfo = message
const msgType = type || 'warning'
const msgUserHTML = userHTML || false
const msgShowClose = showClose || false
const msgDuration = duration || 2000
this.$message({
message: msgInfo,
type:msgType,
dangerouslyUseHTMLString:msgUserHTML,
showClose:msgShowClose,
duration:msgDuration
})
},
// 确认提示框
confirmMessageBox(message,title, confirType, msgUserHTML){
return new Promise((resolve,reject)=>{
this.$confirm(message, title || '提示',{
confirmButtonText:'确认',
cancelButtonText:'取消',
dangerouslyUseHTMLString:msgUserHTML || false,
type:confirType || 'warning'
}).then(()=>{
resolve()
}).catch(()=>{
})
})
}
}
}
消息提示框封装参数说明:
参数 | 说明 |
---|---|
message | 必填,提示内容,String类型 |
type | 非必填,提示框类型,String类型, 可选项为success/warning/info/error,默认值为warning |
userHTML | 非必填,是否将 message属性作为 HTML 片段处理,boolean类型,默认值为false |
showClose | 非必填,是否显示关闭按钮,boolean类型,默认值为false |
duration | 非必填,显示时间, 毫秒。设为 0 则不会自动关闭,number类型,默认值为2000 |
确认提示框封装参数说明:
参数 | 说明 |
---|---|
message | 必填,提示内容,String类型 |
title | 非必填,标题,String类型 |
confirType | 非必填,提示框类型,String类型, 可选项为success/warning/info/error,默认值为warning |
msgUserHTML | 非必填,是否将 message属性作为 HTML 片段处理,boolean类型,默认值为false |
在index.js中进行导出,代码如下:
export { default as messageBox } from './message'
3、在main.js中进行引入,代码如下,(前提:必须在全局安装和引入elementUI组件)
//引入封装好的消息提示框
import { messageBox } from './mixins'
Vue.mixin(messageBox)
这样就大功告成了,在每一个页面中直接使用即可:
<template>
<div>
<el-button @click="tip">消息提示</el-button>
<el-button @click="quetip">确认提示框</el-button>
</div>
</template>
<script>
export default {
name: "book",
data() {
return {
};
},
methods:{
tip(){
this.messageBox("成功",'success')
},
quetip(){
this.confirmMessageBox('您确认要删除吗','提示','error').then(()=>{
// 点击确认后执行的操作
console.log('删除成功')
})
}
}
};
</script>
如下图:
更多推荐
已为社区贡献13条内容
所有评论(0)