Vue3.0+TS+el-element-plus封装的Dialog 对话框

Web_Design_Duke

已于 2022-04-26 16:09:12 修改

阅读量2.3k

点赞数 3

文章标签： elementui vue.js javascript

于 2022-01-26 17:39:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56856837/article/details/122706169

版权

本文介绍了一个基于Vue实现的自定义对话框组件，该组件使用了Element Plus库中的元素，并通过封装提供更加灵活的配置选项。文章展示了如何定义组件属性、使用插槽以及响应用户的交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为<script setup>标签中使用defineProps没有默认值，所以用的defineComponent。

<template>
  <div v-drag>
    <el-dialog
      ref="dialog"
      v-model="layer.show"
      :title="layer.title"
      :width="layer.width"
      center
    >
      <slot></slot>
      <template #footer v-if="layer.showButton">
        <div>
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import type { Ref } from "vue";
import { defineComponent, ref, watch } from "vue";
import drag from "@/directive/drag/index";
import { UseDialogProps } from "element-plus/lib/e