npmapps 1.0.6 → 1.0.8

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>