npmapps 1.0.4 → 1.0.5

package/README.md

@@ -2,4 +2,5 @@
 1.0.1 HeidiSQL_12.10.0.7000_Setup.7z
 1.0.2 v-fullScreen.browser.text
 1.0.3 ehcarts-3dpie
-1.0.4 EllTable
+1.0.4 EllTable
+1.0.5 dialogFnJsx

package/app/dialogFnJsx/DialogForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form ref="form" :model="formData" label-width="80px">
+    <el-form-item label="名称" prop="name">
+      <el-input 
+        v-model="formData.name"
+        placeholder="请输入名称"
+      />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        v-model="formData.email"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        type="textarea"
+        v-model="formData.description"
+        placeholder="请输入描述"
+        :rows="3"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'DialogForm',
+  data() {
+    return {
+      formData: {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  },
+  methods: {
+    getFormData() {
+      return this.formData
+    },
+    resetForm() {
+      this.formData = {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  }
+}
+</script>

package/app/dialogFnJsx/README.md

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

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

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

@@ -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.5",
     "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>
-      );
-    },
-  }