vue3 自定义对话框

以下是使用Vue3自定义对话框的步骤：

1. 在Vue3组件中引入Dialog组件和需要展示的图片：

<template>
  <div>
    <button @click="showDialog = true">打开对话框</button>
    <Dialog v-model="showDialog" :style="{ width: '80%' }">
      <div class="dialog-content">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item, index) in images" :key="index">
            <img :src="item" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog.vue";
import Swiper from "swiper";
import "swiper/swiper-bundle.css";

export default {
  components: {
    Dialog,
  },
  data() {
    return {
      showDialog: false,
      images: [
        "https://picsum.photos/id/237/200/300",
        "https://picsum.photos/id/238/200/300",
        "https://picsum.photos/id/239/200/300",
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
      },
    };
  },
  mounted() {
    new Swiper(".swiper-container", this.swiperOption);
  },
};
</script>

2. 在组件中定义Dialog和Swiper组件，并在data中定义需要展示的图片和Swiper的配置项。

3. 在mounted钩子函数中初始化Swiper组件。

4. 在Dialog组件中展示Swiper组件，并设置Dialog的样式。