<template>
??<div?id="app">
????<ZcMessage
??????v-if="ZcConfirm.config"
??????:title="ZcConfirm.config.title"
??????:show.sync="ZcConfirm.show"
??????class="zc-dialog-pop"
??????@confirm="handleZcConfirm(true)"
??????@update:show="handleZcConfirm(false)"
????>
??????<span>{{?ZcConfirm.config.msg?}}</span>
??????<span?v-if="ZcConfirm.config.tips">({{?ZcConfirm.config.tips?}})</span>
????</ZcMessage>
??</div>
</template>
<script>
import?Vue?from?"vue";
export?default?{
??name:?"App",
??data()?{
????console.log(this);
????return?{
??????ZcConfirm:?{
????????show:?false,
????????config:?null
??????}
????};
??},
??created()?{
????//?設(shè)置Vue原型添加?_$ZcConfirm?方法
????Vue.prototype.$ZcConfirm?=?this._$ZcConfirm;? //為了每個(gè)組件都能調(diào)用這個(gè)函數(shù)娄帖，所以注冊(cè)給原型
??},
??methods:?{
????...mapActions("dic",?["GetDics",?"GetEquipment"]),
????/**
?????*?觸發(fā)ZcConfirm的按鈕后續(xù)流程,包括確認(rèn)/取消/關(guān)閉
?????*?注：App.vue?中觸發(fā)函數(shù)不能直接用?$emit("ZcConfirm:CB",?isConfirm)?因?yàn)?$ZcConfirm?是在mixin中桐猬，
?????*??所以$once("ZcConfirm:CB"）綁定事件時(shí)冷离，this是每一個(gè)調(diào)用?$ZcConfirm?該函數(shù)的vue對(duì)象挠说，而不是App的this
?????*/
????handleZcConfirm(isConfirm)?{
??????this.$emit("ZcConfirm:CB",?isConfirm);
????},
????//?公用confirm彈出確認(rèn)框澡谭，僅需要傳入配置即可,?用_$前綴表示私有
????async?_$ZcConfirm(
??????config?=?{
????????title:?"提示",
????????msg:?"",
????????tips:?""
??????}
????)?{
??????this.ZcConfirm.show?=?true;
??????this.ZcConfirm.config?=?config;
??????return?await?new?Promise(resolve?=>?{
????????this.$once("ZcConfirm:CB",?isConfirm?=>?{
??????????resolve(isConfirm);
????????});
??????});
????},
????//?使用?$ZcConfirm?的示例測(cè)試用法
????async?testZcConfirm()?{
??????const?rst?=?await?this.$ZcConfirm({
????????title:?"測(cè)試使用?$ZcConfirm",
????????msg:?"msgggggggg",
????????tips:?"tipsssss"
??????});
??????console.log("testZcConfirm",?rst);
????}
??}
};
</script>
