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>
以下に示すように：
