基于Vant 3 - dialog组件封装的模态框

<template>
    <teleport to="body">
        <div v-if="!nocancel">
            <van-dialog
              v-model:show="isShow"
              show-cancel-button
              @cancel="cancelDialog()"
              @confirm="confirmDialog()"
              :confirm-botton-text="confirmButtonText"
              :cancelButtonText="cancelButtonText"
             >
                 <template #title>
                     <img
                     v-if="status === 'warning'"
                     src=""
                     class="dialog-image"
                     />
                     <img
                     v-else-if="status === 'success'"
                     src=''
                     class='dialog-image'
                     />
                     <span class='model-title'>{{titleName}}</span>
                     <div class='house' v-if='position'>
                         <div class='house_img'>
                             <img src="@/assets/..." alt=''>
                         </div>
                         <div class='house_title'>
                             <h3>{{Aliases}}</h3>
                             <h4>{{communityName}}</h4>
                         </div>
                     </div>
                 </template>
                 <template #default>
                     <slot name='item' />
                 </template>
             </van-dialog>
         </div>
         <div v-else-if="nocancel">
            <van-dialog
              v-model:show="isShow"
              show-confirm-button
              @cancel="gobacks()"
              @confirm="confirmDialog()"
              :confirm-botton-text="confirmButtonText"
             >
                 <template #title>
                     <img
                     v-if="status === 'warning'"
                     src=""
                     class="dialog-image"
                     />
                     <img
                     v-else-if="status === 'success'"
                     src=''
                     class='dialog-image'
                     />
                     <span class='model-title'>{{titleName}}</span>
                 </template>
                 <template #default>
                     <slot name='item' />
                 </template>
             </van-dialog>
         </div>
    </ teleport>
</ template>

<script>
import {reactive, toRefs} from 'vue'
import {useStore} from 'vuex'

export default {
    name: 'DialogShow',
    props: ['isShow', 'status', 'nocancel', 'title', 'confirmText', 'cancelText', 'position'],
    emits: ['cancelDialog', 'confirmDilog', 'authorizations', 'gobacks'],
    setup(props, context) {
        const store = useStore()
        const current = reactive({
            isShowDialog: props.isShow,
            statusing: props.status ? true : false,
            titleName: props.title,
            confirmButtonText: props.confirmText ? props.confirmText : '确定', 
            cancelButtonText: props.cancelText ? props.cancelText : '取消',
            Aliases: store.state.BuildingData.Aliases,
            communityName: store.state.BuildingData.communityName,
        })
        // 取消按钮
        const cancelDialog = () => {
            context.emit('cancelDialog')
        }
        // 返回
        const gobacks = () => {
            constext.emit('gobacks')
        }
        // 确认按钮
        const confirmDilog = () => {
            context.emit('confirmDilog')
        }
        return {
            ...toRefs(current),
            cancelDialog,
            cofirmDilog,
            gobacks
        }
    },
 }
 </script>