npmapps 1.0.6 → 1.0.7

package/app/dialogFnJsx/README.md

@@ -1,98 +0,0 @@
-# dialogFnJsx 组件文档
-
-## 组件介绍
-
-`dialogFnJsx` 是一个基于 Element UI 的 Dialog 组件封装的函数式对话框组件，使用 JSX 语法实现。它提供了一种更灵活的方式来创建和管理对话框，支持动态内容渲染和自定义插槽。
-
-## 特性
-
-- 函数式调用，无需在模板中声明
-- 支持 JSX 语法
-- 支持多个插槽（默认内容、标题、底部）
-- 自动管理对话框的生命周期
-- 支持所有 Element UI Dialog 的原生属性和事件
-
-## 基本用法
-
-```javascript
-import { dialogFn } from './dialogFnJsx';
-
-// 基础用法
-const { dialog, close } = dialogFn({
-  slots: {
-    default: <div>对话框内容</div>,
-    title: <h3>标题</h3>,
-    footer: (
-      <div>
-        <el-button onClick={() => close()}>取消</el-button>
-        <el-button type="primary" onClick={() => {}}>确定</el-button>
-      </div>
-    )
-  },
-  props: {
-    title: '标题',
-    width: '500px',
-    destroyOnClose: true
-  },
-  on: {
-    close: () => {
-      console.log('关闭');
-    }
-  }
-});
-```
-
-## 参数说明
-
-### options 配置对象
-
-| 参数 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| slots | Object | 否 | 插槽内容配置对象 |
-| props | Object | 否 | Dialog 组件的 props 配置 |
-| on | Object | 否 | Dialog 组件的事件监听配置 |
-
-### slots 配置对象
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| default | JSX.Element | 默认插槽内容 |
-| title | JSX.Element | 标题插槽内容 |
-| footer | JSX.Element | 底部插槽内容 |
-
-### props 配置对象
-
-支持所有 Element UI Dialog 组件的 props 配置，常用的有：
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| title | String | 对话框标题 |
-| width | String | 对话框宽度 |
-| top | String | 对话框距离顶部的距离 |
-| destroyOnClose | Boolean | 关闭时是否销毁内容 |
-| beforeClose | Function | 关闭前的回调函数 |
-
-### on 配置对象
-
-支持所有 Element UI Dialog 组件的事件监听配置，常用的有：
-
-| 事件名 | 说明 |
-|--------|------|
-| close | 对话框关闭时的回调函数 |
-| open | 对话框打开时的回调函数 |
-
-## 注意事项
-
-1. 组件使用 JSX 语法，确保项目已配置好相关的 Babel 插件支持。
-2. 关闭对话框时会自动销毁组件实例，无需手动处理。
-3. 所有的 Element UI Dialog 原生属性都可以通过 props 传入。
-4. 事件监听器通过 on 对象进行配置。
-5. 返回的 close 方法可以用于手动关闭对话框。
-
-## 与普通 Vue 组件的区别
-
-1. 采用函数式调用而非组件式声明
-2. 使用 JSX 语法替代模板语法
-3. 自动管理组件的挂载和销毁
-4. 更灵活的插槽内容配置
-5. 无需在父组件中注册即可使用

package/app/dialogFnJsx/com.vue

@@ -1,74 +0,0 @@
-<template>
-  <div>
-    {{ nameProps }}
-
-    <el-button type="primary" v-if="showBtn" @click="show">打开新弹窗</el-button>
-    <el-button v-if="showBtn" @click="close">关闭</el-button>
-    <el-button v-if="showBtn" @click="obj.a++">{{ obj.a  }}</el-button>
-    <slot />
-  </div>
-</template>
-<script>
-import { dialogFn } from "./index";
-import com11 from "./com11.vue";
-export default {
-  props: {
-    nameProps: {
-      type: String,
-      default: "111",
-    },
-    closeDialog: {
-      type: Function,
-      default: () => {
-      },
-    },
-    showBtn: {
-      type: Boolean,
-      default: false,
-    },
-    obj: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  created() {
-    console.log(this.nameProps, "nameProps");
-  },
-  methods: {
-    close() {
-      console.log(this.closeDialog, "dialog");
-      this.closeDialog();
-    },
-    beforeClose(d) {
-      d();
-    },
-    show() {
-      
-      const { close } = dialogFn({
-        slots: {
-          default: (
-            <com11
-              nameProps="内部defaultSlot"
-              closeDialog={() => close()}
-            />
-          ),
-        },
-        props: {
-          title: "内部弹窗标题",
-          width: "300px",
-          top: "100px",
-          beforeClose: this.beforeClose,
-          appendToBody: true,
-        },
-        on: {
-          close: () => {
-            console.log("内部关闭");
-          },
-        },
-      });
-    },
-  },
-};
-</script>

package/app/dialogFnJsx/com11.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    {{ nameProps }}
-    <el-button type="" @click="close">关闭</el-button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    nameProps: {
-      type: String,
-      default: "111",
-    },
-    closeDialog: {
-      type: Function,
-      default: () => {
-      },
-    },
-  },
-  created() {
-    console.log(this.nameProps, "nameProps");
-  },
-  methods: {
-    close() {
-      console.log(this.closeDialog, "dialog");
-
-      this.closeDialog();
-    },
-  },
-};
-</script>

package/app/dialogFnJsx/examples.vue

@@ -1,205 +0,0 @@
-<template>
-  <div class="dialog-examples">
-    <!-- 基础用法示例 -->
-    <el-button @click="showBasicDialog">基础对话框</el-button>
-    
-    <!-- 自定义标题和内容示例 -->
-    <el-button @click="showCustomDialog" type="primary">自定义对话框</el-button>
-    
-    <!-- 表单验证示例 -->
-    <el-button @click="showFormDialog" type="success">表单对话框</el-button>
-    
-    <!-- 复杂功能示例 -->
-    <el-button @click="showComplexDialog" type="warning">复杂对话框</el-button>
-  </div>
-</template>
-
-<script>
-import DialogForm from './DialogForm.vue'
-
-export default {
-  components: {
-    DialogForm
-  },
-  name: 'DialogExamples',
-  data() {
-    return {
-      formData: {
-        name: '',
-        email: '',
-        description: ''
-      }
-    }
-  },
-  methods: {
-    // 基础对话框示例
-    showBasicDialog() {
-      this.$dialogFnByJsx({
-        props: {
-          title: '基础对话框',
-          width: '30%'
-        },
-        slots: {
-          default: '这是一个基础的对话框示例，展示最简单的用法。'
-        },
-        on: {
-          open: () => console.log('对话框打开了'),
-          close: () => console.log('对话框关闭了')
-        }
-      })
-    },
-
-    // 自定义对话框示例
-    showCustomDialog() {
-      this.$dialogFnByJsx({
-        props: {
-          width: '40%',
-          'custom-class': 'custom-dialog'
-        },
-        slots: {
-          title: <div style="color: #409EFF">自定义标题样式</div>,
-          default: (
-            <div class="custom-content">
-              <el-alert
-                title="自定义内容示例"
-                type="success"
-                description="这里展示了如何使用JSX语法自定义对话框内容"
-                show-icon
-              />
-              <div style="margin-top: 20px">
-                可以在这里放置任何自定义的内容组件
-              </div>
-            </div>
-          ),
-          footer: (
-            <div class="custom-footer">
-              <el-button>取消</el-button>
-              <el-button type="primary">确定</el-button>
-            </div>
-          )
-        }
-      })
-    },
-
-    // 表单对话框示例
-    showFormDialog() {
-      let formRef = null
-      const config = {
-        props: {
-          title: '表单对话框',
-          width: '50%'
-        },
-        slots: {
-          default: (
-            <DialogForm ref={ref => formRef = ref} />
-          ),
-          footer: (
-            <div>
-              <el-button onClick={() => close()}>取消</el-button>
-              <el-button
-                type="primary"
-                onClick={() => {
-                  const formData = formRef.getFormData()
-                  console.log('表单数据：', formData)
-                  close()
-                }}
-              >
-                提交
-              </el-button>
-            </div>
-          )
-        }
-      }
-      let { close } = this.$dialogFnByJsx(config)
-    },
-
-    // 复杂功能示例
-    showComplexDialog() {
-        const config={
-            props: {
-          title: '复杂功能示例',
-          width: '60%',
-          'close-on-click-modal': false,
-          'custom-class': 'complex-dialog'
-        },
-        slots: {
-          default: (
-            <div class="complex-content">
-              <el-tabs type="border-card">
-                <el-tab-pane label="基本信息">
-                  <el-descriptions title="用户信息" border>
-                    <el-descriptions-item label="用户名">张三</el-descriptions-item>
-                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
-                    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
-                    <el-descriptions-item label="备注">
-                      <el-tag size="small">学校</el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="联系地址">
-                      江苏省苏州市吴中区吴中大道 1188 号
-                    </el-descriptions-item>
-                  </el-descriptions>
-                </el-tab-pane>
-                <el-tab-pane label="操作记录">
-                  <el-timeline>
-                    <el-timeline-item
-                      timestamp="2023/4/12"
-                      placement="top"
-                    >
-                      <el-card>
-                        <h4>更新 Github 模板</h4>
-                        <p>王小虎 提交于 2023/4/12 20:46</p>
-                      </el-card>
-                    </el-timeline-item>
-                    <el-timeline-item
-                      timestamp="2023/4/3"
-                      placement="top"
-                    >
-                      <el-card>
-                        <h4>更新 Github 模板</h4>
-                        <p>王小虎 提交于 2023/4/3 20:46</p>
-                      </el-card>
-                    </el-timeline-item>
-                  </el-timeline>
-                </el-tab-pane>
-              </el-tabs>
-            </div>
-          ),
-          footer: (
-            <div class="complex-footer">
-              <el-button onClick={() => close()}>取消</el-button>
-              <el-button type="primary" onClick={() => close()}>确定</el-button>
-            </div>
-          )
-        },
-        on: {
-          open: () => console.log('复杂对话框打开'),
-          close: () => console.log('复杂对话框关闭')
-        }
-        }
-      const { close } = this.$dialogFnByJsx(config)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.dialog-examples {
-  padding: 20px;
-}
-
-.dialog-examples .el-button {
-  margin-right: 10px;
-}
-
-.custom-content {
-  padding: 20px 0;
-}
-
-.complex-content {
-  padding: 20px 0;
-}
-
-:global(.complex-dialog) {
-  min-height: 400px;
-}
-</style>

package/app/dialogFnJsx/index.js

@@ -1,59 +0,0 @@
-import { Dialog } from "element-ui";
-import Vue from "vue";
-
-const DialogConstructor = Vue.extend(Dialog);
-
-export function dialogFn(options = {}) {
-  const {
-    slots = {},
-    props = {},
-    on = {},
-  } = options;
-
-  const dialog = new DialogConstructor({
-    el: document.createElement("div"),
-    render() {
-      const dialogProps = {
-        props: {
-          visible: true,
-          ...props,
-        },
-        on: {
-          "update:visible": (val) => {
-            dialog.visible = val;
-            if (!val) {
-              close();
-            }
-          },
-          ...on,
-        },
-      };
-
-      return (
-        <Dialog {...dialogProps}>
-          {slots.default && <template slot="default">{slots.default}</template>}
-          {slots.title && <template slot="title">{slots.title}</template>}
-          {slots.footer && <template slot="footer">{slots.footer}</template>}
-        </Dialog>
-      );
-    },
-  });
-
-  const close = () => {
-    on.close && on.close();
-    if (dialog && dialog.$el && dialog.$el.parentNode) {
-      dialog.$el.parentNode.removeChild(dialog.$el);
-      dialog.$destroy();
-      
-    }
-  };
-
-  Vue.nextTick(() => {
-    document.body.appendChild(dialog.$el);
-    on.open && on.open();
-  });
-
-  return { dialog, close };
-}
-
-Vue.prototype.$dialogFnByJsx = dialogFn;

package/app/dialogFnJsx/index.vue

@@ -1,91 +0,0 @@
-<template>
-  <div>
-    <el-button @click="show">案例1jsx</el-button>
-    <el-button @click="show1">案例2jsx</el-button>
-    <span>{{ obj.a }}</span>
-  </div>
-</template>
-
-<script>
-import com from "./com.vue";
-
-export default {
-  name: "DialogFn",
-  components: {
-    com,
-  },
-  data() {
-    return {
-      obj: {  
-        a: 1,
-      }
-    };
-  },
-  methods: {
-    beforeClose(done) {
-      console.log("beforeClose");
-      done();
-    },
-    show() {
-      // 确保在打开新对话框前关闭旧的
-      const dialogConfig = {
-        slots: {
-          default: (
-            <com
-              nameProps="defaultSlot"
-              closeDialog={() => close()}
-              obj={this.obj}
-              showBtn={true}
-            >  <el-button type='text'>anniu</el-button></com>
-          ),
-          title: <com nameProps="标题titleSlot" />,
-          footer: (
-            <div>
-              <el-button onClick={() => close()}>取消</el-button>
-              <el-button type="primary" onClick={() => {}}>
-                确定
-              </el-button>
-            </div>
-          ),
-        },
-
-        props: {
-          title: "标题",
-          width: "500px",
-          top: "100px",
-          beforeClose: this.beforeClose,
-          destroyOnClose: true, // 关闭时销毁内容
-        },
-        on: {
-          close: () => {
-            console.log("关闭close");
-          },
-          open: () => {
-            console.log("打开opened");
-          }
-        },
-      };
-
-      const { close } = this.$dialogFnByJsx(dialogConfig);
-    },
-    show1() {
-      const dialogConfig = {
-        slots: {
-          default: (
-            <com
-              nameProps="简单案例"
-              closeDialog={() => close()}
-              showBtn={true}
-            >  </com>
-          ),
-        },
-        props: {
-          title: "标题",
-        },
-      }
-      const { close } = this.$dialogFnByJsx(dialogConfig);
-
-    }
-  },
-};
-</script>