KGD Dialog

kgddialog 是一个基于 Vue 3 和 Element Plus 封装的函数式Dailog组件，它允许开发者快速集成和使用自定义对话框功能。

Features

• 易于集成：使用 Vue 3 和 Element Plus，简单的 API 设计。
• 灵活性：支持所有 Element Plus ElDialog 的属性、插槽和事件。
• 默认样式：包括默认宽度和标题，可自定义修改。

Installation

yarn add kgddialog

Usage

首先，确保你已经安装并引入了 Element Plus 和 Vue：

yarn add element-plus

如果安装失败，请先删除node_modules文件夹，再次添加包

然后，在你的 Vue 项目中使用 KGDdialog：

import { createApp } from 'vue';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.mount('#app');

How to Use

在你的 Vue 组件中，可以这样使用 kgddialog：

// 示例页面
<template>
  <div>
    <button @click="handleDialog">打开Dialog</button>
  </div>
</template>

<script setup>
import KGDdialog from "kgddialog";
import { h } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
const gridData = [
  { date: "2021-10-01", name: "Tom", address: "No. 123, Sunset Blvd" },
  { date: "2021-10-02", name: "Jerry", address: "No. 456, Sunrise St" },
  { date: "2021-10-03", name: "Mickey", address: "No. 789, Moonlight Ave" },
];

const { openDialog }  = 
  KGDdialog({props: {
      title: "测试 Dialog",
      width: "500px",
      fullscreen: false,
      closeOnPressEscape: true,
      closeOnClickModal: false,
      draggable: true,
    },
    slots: {
      default() {
        return h(
          ElTable,
          { data: gridData },
          {
            default: () => [
              h(ElTableColumn, {
                property: "date",
                label: "Date",
                width: "150",
              }),
              h(ElTableColumn, {
                property: "name",
                label: "Name",
                width: "200",
              }),
              h(ElTableColumn, { property: "address", label: "Address" }),
            ],
          }
        );
      },
      footer() {
        return h("div", "Dialog 底部的内容");
      },
      header() {
        return h("div", "Dialog 标题的内容");
      },
    },
    events: {
      opened() {
        console.log("opened Dialog 已打开");
      },
      close() {
        console.log("close Dialog 已关闭");
      },
    },
  });
 

const handleDialog = () => { openDialog() };
</script>

也支持jsx语法

// 示例页面
<template>
  <div>
    <button @click="handleDialog">打开Dialog</button>
  </div>
</template>

<script setup lang="jsx">
import  KGDdialog from 'kgddialog'

const { openDialog}  = 
  KGDdialog({
    props: {
      title: "测试 Dialog",
      width: "500px",
      fullscreen: false,
      closeOnPressEscape: true,
      closeOnClickModal: false,
      draggable: true,
    },
    slots: {
        default(){
            return <div>Dialog 主体内容12312312</div>
        },
        footer(){
            return <div>Dialog 按钮操作区的内容</div>
        }
    },
    events: {
      open() {
        console.log("open Dialog 打开前");
      },
      opened() {
        console.log("opened Dialog 已打开");
      },
      close() {
        console.log("close Dialog 已关闭");
      },
    },
  });


const handleDialog = () => {openDialog()};
</script>

API

Props

接受所有 Element Plus ElDialog 的属性，例如：

• title: String —— 对话框标题，默认 "Default Title"
• width: String —— 对话框宽度，默认 "50%"
• fullscreen: Boolean —— 是否全屏显示，默认 false

Slots

• default: 主体内容插槽
• footer: 底部内容插槽
• header: 自定义标题插槽

Events

支持所有 Element Plus ElDialog 的事件，例如 open, close 等。

Contributing

欢迎贡献! 如果你想帮助改进这个包，请提交 Pull Requests 或开 Issue 讨论新功能或者变更。

License

发布在 ISC 许可证下。查看 LICENSE 文件了解更多信息。