matrix_components 2.0.393 → 2.0.400

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix_components",
-  "version": "2.0.393",
+  "version": "2.0.400",
   "private": false,
   "type": "module",
   "files": [

package/dist/ComponentDemo/DialogDemo.vue

@@ -1,210 +0,0 @@
-<template>
-  <div>
-    <el-button type="warning" @click="openDialog({ params: { test: '222' } })">弹出框组件</el-button>
-    <el-button type="primary" @click="updateDialogOption">更新弹窗选项</el-button>
-    <el-button type="success" @click="callDialogMethod">调用弹窗方法</el-button>
-    <!-- 为每个打开的弹窗生成一个关闭按钮 -->
-    <div v-for="(instance, index) in dialogInstances" :key="instance.id" style="margin-top: 10px;">
-      <el-button type="danger" @click="closeDialog(instance)">关闭弹窗 {{ index + 1 }}</el-button>
-    </div>
-
-    <!-- 全部关闭按钮 -->
-    <el-button v-if="dialogInstances.length > 0" type="danger" @click="closeAllDialogs" style="margin-top: 10px;">关闭所有弹窗</el-button>
-  </div>
-</template>
-<script setup lang="ts">
-import VideoDemo from '@/views/VideoDemo.vue'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-// 扩展Window接口
-declare global {
-  interface Window {
-    __dialogInstances: any[];
-    NsDialog: any;
-  }
-}
-
-// 保存当前打开的弹窗实例数组
-const dialogInstances = ref<any[]>([])
-const openIndex = ref(0);
-function openDialog(data = {}) {
-  openIndex.value++;
-  if(dialogInstances.value.length === 0) {
-    openIndex.value = 0;
-  }
-  window.NsDialog(
-    {
-      class: 'xxx',
-      title: '测试',
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      dom: VideoDemo, // 也可以通过异步方式：import("@/views/VideoDemo.vue") 和 () => import("@/views/VideoDemo.vue")
-      domCompleted: (domRef: any)=>{
-        // dom加载完成或触发函数，domRef为dom实例可以执行defineExpose暴露出的函数
-        console.log('组件加载完成，domRef:', domRef)
-        domRef?.xxx?.()
-      },
-      option: {
-        // dom对应的自定义组件props属性
-        ...data,
-      },
-      events: {
-        // dom组件内部自定义事件emit('btnClick', xxx)
-        btnClick: () => {
-          console.log('点击中间区域内容')
-        },
-      },
-      width: '800px', // 宽度, 整个弹出框的高度，非内容高度
-      height: '450px', // 高度, 不配置则默认为内容高度
-      dialogPadding: [10, 20], // 弹窗内padding
-      // 弹窗绝对定位
-      x: 250 + openIndex.value * 20,
-      y: 100 + openIndex.value * 20,
-      // 设置函数时，则有放大和还原按钮，且按返回的对象设置弹出框。（会关闭拖动功能）
-      // maxSize: function () {
-      //   return { width: '100%', height: '800px', x: 0, y: 100 }
-      // },
-      modal: false, // 模态框
-      modalColor: 'rgb(0 21 115 / 20%)', // 遮罩层颜色
-      showFooter: true, // 默认显示底部按钮
-      immediately: false, // true立即取消弹出框, false异步请求后取消弹出框，默认false
-      draggable: true, // 是否可拖拽，默认false
-      // 底部确认按钮回调事件
-      confirm: async (closeFn: any, componentRef: any, footerLoading: any) => {
-        // 2.componentRef可以调用内部函数，前提需要defineExpose
-        try {
-          const selectRows = componentRef?.value?.getSelectedRows()
-          console.log('点击确认，选择数据：', selectRows)
-        } catch (e) {
-          console.log(e)
-          await new Promise((resolve) => setTimeout(resolve, 1000))
-        }
-        // 3.footerLoading可以控制底部loading状态
-        if (footerLoading) {
-          footerLoading.value = false
-        }
-        // 1.请求数据，再关闭
-        if (closeFn) {
-          closeFn()
-        }
-      },
-      close: () => {
-        // 关闭弹出时立即出发
-        console.log('点击关闭')
-        // 更新dialogInstances数组
-        updateDialogInstances()
-      },
-      closed: () => {
-        // 弹窗销毁时触发
-        console.log('完成关闭')
-        // 更新dialogInstances数组
-        updateDialogInstances()
-      },
-      // 头部+底部自定义配置
-      /*
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      headerDom: xxx,
-      headerOption: {},
-      headerEvents: {},
-      // 任何组件添加 $emit('close') 时，会触发关闭弹出框事件
-      footerDom: yyy,
-      footerOption: {},
-      footerEvents: {},
-      // 底部按钮名称
-      footerTitle: {
-        close: "取消",
-        confirm: "确定",
-      },
-      */
-    },
-    true,
-    '#app',
-  ) // true为是否遮罩（非必填）， '#app'为挂载点（非必填）
-
-  // 更新dialogInstances数组
-  updateDialogInstances()
-
-  setTimeout(()=>{
-    const data = window.__dialogInstances;
-    console.log('当前所有弹窗实例:', data)
-  }, 333)
-}
-
-// 更新dialogInstances数组
-function updateDialogInstances() {
-  // 使用setTimeout确保在DOM更新后执行
-  setTimeout(() => {
-    dialogInstances.value = [...window.__dialogInstances]
-  }, 0)
-}
-
-// 更新弹窗选项
-function updateDialogOption() {
-  if (dialogInstances.value.length > 0) {
-    // 更新最后一个弹窗的选项
-    const lastInstance = dialogInstances.value[dialogInstances.value.length - 1]
-    // 现在可以直接更新弹窗标题了
-    lastInstance.updateOption({
-      title: '更新后的标题',
-      params: { test: '更新后的参数' }
-    })
-    console.log('已更新弹窗标题和选项')
-  } else {
-    console.warn('没有打开的弹窗实例')
-  }
-}
-
-// 调用弹窗内组件的方法
-function callDialogMethod() {
-  if (dialogInstances.value.length > 0) {
-    // 调用最后一个弹窗内组件的方法
-    const lastInstance = dialogInstances.value[dialogInstances.value.length - 1]
-    if (lastInstance.domRef) {
-      // 使用新的callMethod方法调用组件方法
-      // 注意：这里需要组件内部通过defineExpose暴露方法
-      lastInstance.callMethod('defineExpose暴露的方法名', 'arg1', 'arg2')
-      console.log('已调用弹窗内组件方法')
-    } else {
-      console.warn('组件引用不存在')
-    }
-  } else {
-    console.warn('没有打开的弹窗实例')
-  }
-}
-
-// 关闭指定弹窗
-async function closeDialog(instance: any) {
-  if (instance) {
-    // 使用新的close方法关闭弹窗
-    await instance.close()
-    console.log('已关闭指定弹窗')
-  } else {
-    console.warn('弹窗实例不存在')
-  }
-}
-
-// 关闭所有弹窗
-function closeAllDialogs() {
-  // 关闭所有弹窗
-  dialogInstances.value.forEach(instance => {
-    instance.close()
-  })
-  openIndex.value = 0;
-  console.log('已关闭所有弹窗')
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    openDialog({ params: { test: '1' } })
-  }, 300)
-
-  // 初始化dialogInstances数组
-  updateDialogInstances()
-})
-
-onUnmounted(()=>{
-  window.__dialogInstances.forEach(item=>{
-    item.close()
-  })
-})
-</script>
-<style scoped></style>

package/dist/ComponentDemo/ExampleFormConfig.js

@@ -1,270 +0,0 @@
-// 动态表单配置文件
-export const formConfig = {
-  // 表单数据初始值
-  formData: {
-    name: "",
-    email: "",
-    age: null,
-    gender: "",
-    hobbies: [],
-    isVip: false,
-    score: 0,
-    birthday: null,
-    city: [],
-    description: "",
-    customField: "",
-    province: "",
-    citySelect: "",
-    district: "",
-    category: "",
-    subcategory: "",
-  },
-
-  // 表单配置项
-  formItems: [
-    {
-      label: "输入框",
-      prop: "name",
-      component: "input",
-      span: 12,
-      required: true,
-      placeholder: "请输入输入框",
-      props: {
-        clearable: true,
-      },
-    },
-    {
-      label: "邮箱",
-      prop: "email",
-      component: "input",
-      span: 12,
-      required: true,
-      props: {
-        clearable: true,
-      },
-      rules: [
-        { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
-      ],
-    },
-    {
-      label: "数值输入",
-      prop: "age",
-      component: "number",
-      span: 12,
-      props: {
-        min: 1,
-        max: 120,
-        controlsPosition: "right",
-      },
-    },
-    {
-      label: "单选",
-      prop: "gender",
-      component: "radio-group",
-      span: 12,
-      options: [
-        { label: "AAA", value: "male" },
-        { label: "BBB", value: "female" },
-      ],
-    },
-    {
-      label: "多选",
-      prop: "hobbies",
-      component: "checkbox-group",
-      span: 24,
-      options: [
-        { label: "读书", value: "reading" },
-        { label: "运动", value: "sports" },
-        { label: "音乐", value: "music" },
-        { label: "旅行", value: "travel" },
-      ],
-    },
-    {
-      label: "滑块",
-      prop: "isVip",
-      component: "switch",
-      span: 12,
-    },
-    {
-      label: "评分",
-      prop: "score",
-      component: "el-slider",
-      span: 12,
-      props: {
-        min: 0,
-        max: 100,
-        showStops: true,
-        showTooltip: false,
-      },
-    },
-    {
-      label: "日期选择",
-      prop: "birthday",
-      component: "date-picker",
-      span: 12,
-      props: {
-        type: "date",
-        format: "YYYY-MM-DD",
-        valueFormat: "YYYY-MM-DD",
-      },
-    },
-    {
-      label: "城市",
-      prop: "city",
-      component: "cascader",
-      span: 12,
-      options: [
-        {
-          value: "jiangsu",
-          label: "江苏省",
-          children: [
-            { value: "nanjing", label: "南京市" },
-            { value: "suzhou", label: "苏州市" },
-          ],
-        },
-        {
-          value: "zhejiang",
-          label: "浙江省",
-          children: [
-            { value: "hangzhou", label: "杭州市" },
-            { value: "ningbo", label: "宁波市" },
-          ],
-        },
-      ],
-      props: {
-        clearable: true,
-        filterable: true,
-      },
-    },
-    {
-      label: "长文本",
-      prop: "description",
-      component: "textarea",
-      span: 24,
-      props: {
-        rows: 4,
-        maxlength: 200,
-        showWordLimit: true,
-      },
-    },
-    {
-      label: "关联字段",
-      prop: "customField",
-      component: "input",
-      span: 24,
-      slot: "customSlot",
-    },
-    {
-      label: "级联A",
-      prop: "province",
-      component: "select",
-      span: 8,
-      optionsKey: "provinces",
-      props: {
-        clearable: true,
-      },
-    },
-    {
-      label: "城市",
-      prop: "citySelect",
-      component: "select",
-      span: 8,
-      dependsOn: {
-        field: "province",
-        optionsKey: "cities",
-      },
-      props: {
-        clearable: true,
-      },
-    },
-    {
-      label: "区县",
-      prop: "district",
-      component: "select",
-      span: 8,
-      dependsOn: {
-        field: "citySelect",
-        optionsKey: "districts",
-      },
-      props: {
-        clearable: true,
-      },
-    },
-  ],
-
-  // 表单验证规则
-  formRules: {
-    name: [
-      { required: true, message: "请输入输入框", trigger: "blur" },
-      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
-    ],
-    email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
-  },
-
-  // 下拉框选项数据源
-  optionsData: {
-    provinces: [
-      { label: "江苏省", value: "jiangsu" },
-      { label: "浙江省", value: "zhejiang" },
-      { label: "上海市", value: "shanghai" },
-    ],
-    cities: {
-      jiangsu: [
-        { label: "南京市", value: "nanjing" },
-        { label: "苏州市", value: "suzhou" },
-        { label: "无锡市", value: "wuxi" },
-      ],
-      zhejiang: [
-        { label: "杭州市", value: "hangzhou" },
-        { label: "宁波市", value: "ningbo" },
-        { label: "温州市", value: "wenzhou" },
-      ],
-      shanghai: [
-        { label: "黄浦区", value: "huangpu" },
-        { label: "徐汇区", value: "xuhui" },
-        { label: "长宁区", value: "changning" },
-      ],
-    },
-    districts: {
-      nanjing: [
-        { label: "玄武区", value: "xuanwu" },
-        { label: "秦淮区", value: "qinhuai" },
-        { label: "建邺区", value: "jianye" },
-      ],
-      suzhou: [
-        { label: "姑苏区", value: "gusu" },
-        { label: "虎丘区", value: "huqiu" },
-        { label: "吴中区", value: "wuzhong" },
-      ],
-      hangzhou: [
-        { label: "西湖区", value: "xihu" },
-        { label: "拱墅区", value: "gongshu" },
-        { label: "江干区", value: "jianggan" },
-      ],
-    },
-    categories: [
-      { label: "电子产品", value: "electronics" },
-      { label: "服装鞋帽", value: "clothing" },
-      { label: "图书音像", value: "books" },
-    ],
-    subcategories: {
-      electronics: [
-        { label: "手机", value: "phone" },
-        { label: "电脑", value: "computer" },
-        { label: "平板", value: "tablet" },
-      ],
-      clothing: [
-        { label: "男装", value: "mens" },
-        { label: "女装", value: "womens" },
-        { label: "童装", value: "kids" },
-      ],
-      books: [
-        { label: "小说", value: "novel" },
-        { label: "技术书籍", value: "tech" },
-        { label: "教育", value: "education" },
-      ],
-    },
-  },
-};
-
-export default formConfig;