El cuadro de mensaje de mensaje de elementUI y el cuadro de mensaje de confirmación están encapsulados en el proyecto vue, que se puede usar globalmente
1. Cree una nueva carpeta mixins en src
2. Cree un nuevo archivo message.js y un archivo index.js debajo de la carpeta,
como se muestra en la siguiente figura:
El código del paquete en message.js es el siguiente:
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(()=>{
})
})
}
}
}
Descripción del parámetro del paquete del cuadro de solicitud de mensaje:
| parámetro | Descripción |
|---|---|
| mensaje | Requerido, contenido de solicitud, tipo de cadena |
| tipo | No es necesario, el tipo de cuadro de aviso, el tipo de cadena, las opciones son éxito / advertencia / información / error, el valor predeterminado es advertencia |
| userHTML | No es necesario, ya sea para tratar el atributo del mensaje como un fragmento HTML, tipo booleano, el valor predeterminado es falso |
| showClose | No es necesario, ya sea para mostrar el botón de cierre, tipo booleano, el valor predeterminado es falso |
| duración | Opcional, tiempo de visualización, milisegundos. Establecido en 0, no se cerrará automáticamente, tipo de número, el valor predeterminado es 2000 |
Confirme la descripción del parámetro del paquete del cuadro de aviso:
| parámetro | Descripción |
|---|---|
| mensaje | Requerido, contenido de solicitud, tipo de cadena |
| título | Opcional, título, tipo de cadena |
| confirType | No es necesario, el tipo de cuadro de aviso, el tipo de cadena, las opciones son éxito / advertencia / información / error, el valor predeterminado es advertencia |
| msgUserHTML | No es necesario, ya sea para tratar el atributo del mensaje como un fragmento HTML, tipo booleano, el valor predeterminado es falso |
Exportar en index.js, el código es el siguiente:
export {
default as messageBox } from './message'
3. Introduzca en main.js, el código es el siguiente (premisa: los componentes de elementUI deben instalarse e introducirse globalmente)
//引入封装好的消息提示框
import {
messageBox } from './mixins'
Vue.mixin(messageBox)
Eso es todo, puedes usarlo directamente en cada página:
<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>
Como se muestra abajo:
