elementUI 메시지 메시지 프롬프트 상자와 확인 프롬프트 상자는 vue 프로젝트에 캡슐화되어 전역 적으로 사용할 수 있습니다.
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(()=>{
})
})
}
}
}
메시지 프롬프트 상자 패키지 매개 변수 설명 :
| 매개 변수 | 기술 |
|---|---|
| 메시지 | 필수, 프롬프트 내용, 문자열 유형 |
| 유형 | 필요하지 않음, 프롬프트 상자 유형, 문자열 유형, 옵션은 성공 / 경고 / 정보 / 오류이며 기본값은 경고입니다. |
| userHTML | 필요하지 않음, 메시지 속성을 HTML 조각, 부울 유형으로 처리할지 여부, 기본값은 false입니다. |
| showClose | 필요하지 않음, 닫기 버튼 표시 여부, 부울 유형, 기본값은 false |
| 지속 | 선택 사항, 표시 시간, 밀리 초. 0으로 설정하면 자동으로 닫히지 않습니다. 숫자 유형, 기본값은 2000입니다. |
프롬프트 상자 패키지 매개 변수 설명을 확인하십시오.
| 매개 변수 | 기술 |
|---|---|
| 메시지 | 필수, 프롬프트 내용, 문자열 유형 |
| 표제 | 선택 사항, 제목, 문자열 유형 |
| confirType | 필요하지 않음, 프롬프트 상자 유형, 문자열 유형, 옵션은 성공 / 경고 / 정보 / 오류이며 기본값은 경고입니다. |
| msgUserHTML | 필요하지 않음, 메시지 속성을 HTML 조각, 부울 유형으로 처리할지 여부, 기본값은 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>
아래 그림과 같이:
