vue3构建Dialog通用组件

Dialog组件和上篇Confirm组件的思路类似，区别在于：1、内容可以自定义；2、不需要使用函数式构建方法。这里利用vue3提供的Teleport组件将其插入到body中，代码如下：

<template>
  <Teleport to="body">
    <div class="dialog">
      <transition name="fade">
        <div class="mask" v-if="modelValue" @click="close"></div>
      </transition>
      <transition name="upsd">
        <div class="detail" v-if="modelValue">
          <div class="title" v-if="title">
            {{ title }}
          </div>
          <div class="content">
            <slot />
          </div>

          <div class="btn-group" v-if="cancelHandle || confirmHandle">
            <m-button type="primary" @click="cancel">{{ cancelText }}</m-button>
            <m-button @click="confirm">{{ confirmText }}</m-button>
          </div>
        </div>
      </transition>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  title: String,
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelHandle: Function,
  confirmHandle: Function,
  close: Function
})
const emit = defineEmits(['update:modelValue'])
const close = () => {
  emit('update:modelValue', false)
  props.close && props.close()
}
const cancel = () => {
  props.cancelHandle && props.cancelHandle()
  close()
}
const confirm = () => {
  props.confirmHandle && props.confirmHandle()
  close()
}
</script>

调用时

    <m-dialog
      v-model="isVisible"
      title="标题"
      :cancel-handle="test('取消')"
      :confirm-handle="test('确定')"
      :close="test('关闭')"
    >
      <span>内容</span>
    </m-dialog>

效果如下