npmapps 1.0.4 → 1.0.6

package/app/dialogFnJsx/examples.vue

@@ -0,0 +1,205 @@
+<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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,91 @@
+<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>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "npmapps",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"

package/app/EllTable/README.md

@@ -1,70 +0,0 @@
-# EllTable 组件
-
-基于 Element UI Table 组件扩展的表格组件，支持鼠标横向滚动和提示功能。
-
-## 功能特点
-
-- 支持鼠标横向滚动（按住 Alt 键）
-- 自动检测表格是否需要横向滚动
-- 可配置的提示信息和位置
-- 继承 Element UI Table 的所有功能和属性
-
-## 属性配置
-
-| 属性名 | 类型 | 默认值 | 说明 |
-|--------|------|---------|------|
-| disableMouseHorizontalWheel | Boolean | false | 是否禁用鼠标横向滚动功能 |
-| hiddenMouseWheel | Boolean | false | 是否隐藏鼠标滚动提示 |
-| showTooltip | Boolean | false | 是否显示提示信息 |
-| tooltipContent | String/Array | [] | 提示信息内容，可以是字符串或字符串数组 |
-| tooltipPosition | Object | { top: "10px", left: "10px" } | 提示信息位置，支持 top、left、bottom、right |
-
-## 使用示例
-
-```vue
-<template>
-  <ell-table
-    :data="tableData"
-    border
-    style="width: 100%"
-    height="300"
-    :tooltip-content="['按住Alt键可以横向滚动表格', '自定义提示信息']"
-    :show-tooltip="true"
-    :tooltip-position="{ top: '20px', right: '20px' }"
-  >
-    <el-table-column prop="date" label="日期" width="180" fixed="left"></el-table-column>
-    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
-    <el-table-column prop="address" label="地址" width="300"></el-table-column>
-    <!-- 更多列... -->
-  </ell-table>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [{
-        date: '2023-01-01',
-        name: '张三',
-        address: '北京市朝阳区'
-      }]
-    }
-  }
-}
-</script>
-```
-
-## 注意事项
-
-1. 组件会自动检测表格是否同时存在横向和纵向滚动条，如果存在则显示提示信息
-2. 可以通过 `disableMouseHorizontalWheel` 属性禁用鼠标横向滚动功能
-3. 提示信息位置可以通过 `tooltipPosition` 属性灵活配置
-4. 组件完全兼容 Element UI Table 的所有功能，可以正常使用 Table 组件的所有属性和方法
-
-## 建议功能扩展
-
-1. 支持自定义滚动速度
-2. 添加滚动方向锁定功能
-3. 提供滚动事件回调
-4. 支持 tooltip 主题定制
-5. 添加更多交互效果（如双击切换滚动方向、滚动到边缘时的视觉反馈等）

package/app/EllTable/index.js

@@ -1,218 +0,0 @@
-import { Table } from "element-ui";
-
-/**
- * @description 扩展Element UI Table组件，支持鼠标横向滚动和提示功能
- * @extends {Table}
- */
-export const tableMouseHorizontalWheel = {
-    extends: Table,
-    data() {
-      return {
-        tooltipContentList: [],
-        tooltipVisible: this.showTooltip,
-        scrollDirection: 'vertical', // 默认为垂直滚动
-        isScrollingToEdge: false, // 是否滚动到边缘
-      };
-    },
-    props: {
-      /** @prop {Boolean} [disableMouseHorizontalWheel=false] - 是否禁用鼠标横向滚动功能 */
-      disableMouseHorizontalWheel: {
-        type: Boolean,
-        default: false,
-      },
-      /** @prop {Boolean} [hiddenMouseWheel=false] - 是否隐藏鼠标滚动提示 */
-      hiddenMouseWheel: {
-        type: Boolean,
-        default: false,
-      },
-      /** @prop {Boolean} [showTooltip=false] - 是否显示提示信息 */
-      showTooltip: {
-        type: Boolean,
-        default: false,
-      },
-      /** @prop {String|Array} [tooltipContent=[]] - 提示信息内容 */
-      tooltipContent: {
-        type: [String, Array],
-        default: () => [],
-      },
-      /** @prop {Object} [tooltipPosition={ top: "10px", left: "10px" }] - 提示信息位置 */
-      tooltipPosition: {
-        type: Object,
-        default: () => ({
-          top: "10px",
-          left: "10px",
-        })
-      },
-    },
-    created() {
-      // 初始化提示信息列表
-      if (Array.isArray(this.tooltipContent)) {
-        this.tooltipContentList.push(...this.tooltipContent);
-      } else {
-        this.tooltipContentList.push(this.tooltipContent);
-      }
-    },
-  
-    mounted() {
-      const newHasScrollbarByMff = _.debounce(this.hasScrollbarByMff, 10);
-      // 监听this.$el元素变化
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "childList") {
-            newHasScrollbarByMff();
-          }
-        });
-      });
-      observer.observe(this.$el, {
-        childList: true,
-        subtree: true,
-      });
-  
-      if (!this.disableMouseHorizontalWheel) {
-        this.$el.addEventListener("wheel", this.handleWheel);
-        
-      }
-    },
-    beforeDestroy() {
-      if (!this.disableMouseHorizontalWheel) {
-        this.$el.removeEventListener("wheel", this.handleWheel);
-      }
-    },
-    methods: {
-      /**
-       * @description 处理鼠标滚轮事件，实现横向滚动
-       * @param {WheelEvent} event - 鼠标滚轮事件对象
-       */
-      handleWheel(event) {
-        const tableBody = this.$el.querySelector(".el-table__body-wrapper");
-        
-        if (this.scrollDirection === 'horizontal' || event.altKey) {
-          event.preventDefault();
-          tableBody.scrollLeft += event.deltaY;
-          
-          // 检查是否滚动到边缘
-          if (tableBody.scrollLeft <= 0 || tableBody.scrollLeft >= (tableBody.scrollWidth - tableBody.clientWidth)) {
-            this.showEdgeFeedback(tableBody);
-          }
-        } else {
-          // 检查垂直滚动是否到达边缘
-          if (tableBody.scrollTop <= 0 || tableBody.scrollTop >= (tableBody.scrollHeight - tableBody.clientHeight)) {
-            this.showEdgeFeedback(tableBody);
-          }
-        }
-      },
-      /**
-       * @description 检测表格是否同时存在横向和纵向滚动条，并显示提示信息
-       */
-      /**
-       * @description 切换滚动方向
-       */
-      toggleScrollDirection() {
-        this.scrollDirection = this.scrollDirection === 'vertical' ? 'horizontal' : 'vertical';
-        this.tooltipContentList = this.tooltipContentList.filter(item => !item.includes('当前滚动方向'));
-        this.tooltipContentList.push(`当前滚动方向: ${this.scrollDirection === 'vertical' ? '垂直' : '水平'}`);
-        // 消息提醒
-        this.$message({
-          message: `当前表格滚动方向已切换为: ${this.scrollDirection ==='vertical'? '垂直' : '水平'}`,
-          type: 'info',
-          duration: 1000, 
-        })
-      },
-
-      /**
-       * @description 显示边缘视觉反馈
-       * @param {HTMLElement} element - 需要添加视觉反馈的元素
-       */
-      showEdgeFeedback(element) {
-        if (!this.isScrollingToEdge) {
-          this.isScrollingToEdge = true;
-          element.style.transition = 'background-color 0.3s';
-          element.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
-          
-          setTimeout(() => {
-            element.style.backgroundColor = '';
-            setTimeout(() => {
-              element.style.transition = '';
-              this.isScrollingToEdge = false;
-            }, 300);
-          }, 300);
-        }
-      },
-
-      hasScrollbarByMff() {
-        console.log(123);
-        
-        const tableBody = this.$el.querySelector(".el-table__body-wrapper");
-        // 是否有竖向滚动条
-        const verticalScrollbarWidth =
-          tableBody.scrollHeight - tableBody.clientHeight;
-        console.log(tableBody.scrollHeight, tableBody.clientHeight,'1231321321',verticalScrollbarWidth);
-        
-        // 是否有横向滚动条
-        const horizontalScrollbarHeight =
-          tableBody.scrollWidth - tableBody.clientWidth;
-          console.log(tableBody.scrollWidth, tableBody.clientWidth,'1231321321',horizontalScrollbarHeight);
-          
-      
-        
-        // 如果有横向滚动条和竖向滚动条 hiddenMouseWheel 为false时 tooltipVisible 为true
-        if (
-          verticalScrollbarWidth > 0 &&
-          horizontalScrollbarHeight > 0 &&
-          !this.hiddenMouseWheel
-        ) {
-          this.tooltipContentList.push("按住Alt键可以横向滚动表格");
-          this.tooltipVisible = true;
-          this.$el.addEventListener("dblclick", this.toggleScrollDirection);
-          this.tooltipContentList.push('双击表格任意位置可切换滚动方向')
-        }else{
-          this.tooltipContentList = this.tooltipContentList.filter(item =>!item.includes('按住Alt键可以横向滚动表格'));
-          this.tooltipContentList = this.tooltipContentList.filter(item =>!item.includes('双击表格任意位置可切换滚动方向'));
-          this.tooltipVisible = false; 
-          console.log(1231321);
-        }
-        
-      },
-    },
-    render(h) {
-      const table = this.$options.extends.render.call(this, h);
-      return (
-        <div
-          style={{
-            position: "relative",
-          }}
-        >
-          <el-tooltip
-            placement="top"
-            style={{
-              position: "absolute",
-              ...(this.tooltipPosition.top && { top: this.tooltipPosition.top }),
-              ...(this.tooltipPosition.left && { left: this.tooltipPosition.left }),
-              ...(this.tooltipPosition.bottom && { bottom: this.tooltipPosition.bottom }),
-              ...(this.tooltipPosition.right && { right: this.tooltipPosition.right }),
-              zIndex: 11,
-              display: this.tooltipVisible ? "block" : "none",
-            }}
-          >
-            <div slot="content">
-              {this.tooltipContentList.map((item, index) => {
-                return (
-                  <div key={index} style={{ marginBottom: "4px" }}>
-                    <span>{index + 1}.</span> {item}
-                  </div>
-                );
-              })}
-            </div>
-            <i
-              class="el-icon-info"
-              style={{
-                cursor: "pointer",
-                display: this.tooltipVisible ? "block" : "none",
-              }}
-            ></i>
-          </el-tooltip>
-          {table}
-        </div>
-      );
-    },
-  }