自定义组件库

下拉

• 多选

  • MultipleChoiceBox（下拉多选选择框）

    API

    Props

    | 属性 | 说明 | 类型 | 默认值 | | :----: | :---- | :---- | :---- | | treeData | 提供选择的数据源 | Array<{children,title,key,[scopedSlots]}> | [] | | value(v-model) | 指定当前选中的条目 | string[]\number[]\undefined | undefined | | bordered | 是否无边框 | boolean | true | | loading | 加载状态（异步获取treeData情况下使用） | boolean | true | | placeholder | 没有选择数据情况下的提示 | string | "请选择" | | maxShowCount | 最多显示的"选中项"数量 | number | 2 | | maxSelectedOptionTextLength | 最大显示的"选中项"文本长度 | number | 2 | | required | value不能为空，至少需要选择一项 | boolean | false |

    Events

    | 事件名称 | 说明 | 回调参数 | | :----: | :---- | :---- | | check | 选中时调用，参数为选中项的value值 | function(value) |

    Option props

    | 属性 | 说明 | 类型 | 默认值 | | :----: | :---- | :---- | :---- | | title | 备选项显示的title | string | - | | key | 备选项的唯一值 | string | - | | children | 树形结构下，当前节点的子节点,叶子节点情况下可以为空 | Array<{children,title,key,[scopedSlots]}> | - | | scopedSlots | 使用treeData时，可以通过该属性配置支持slot的属性，如scopedSlots:{title:'xxx'} | object | - |

    代码演示

    html

    <multiple-choice-box placeholder="请选择"
                             v-model="value"
                             :bordered="true"
                             :required="true"
                             :tree-data="treeData"></multiple-choice-box>

    javascript

     value = ['黎明-01', '黎明-02'];
        
     treeData: any[] = [
        {
          title: '四大天王',
          key: 'root',
          children: [
            {
              title: '张学友',
              key: '张学友',
              children: [
                { key: '张学友-01', title: '张学友1' },
                {
                  key: '张学友-02',
                  title: '张学友2',
                  children: [
                    {
                      key: '张学友-02-01',
                      title: '张学友2-01',
                    },
                  ],
                }],
            },
            {
              title: '黎明',
              key: '黎明',
              children: [
                { title: '黎明1', key: '黎明-01' },
                { title: '黎明2', key: '黎明-02' },
              ],
              // scopedSlots: { title: 'title' },
            },
            {
              title: '刘德华',
              key: '刘德华',
              children: [{ key: '刘德华-01', title: '刘德华1' }],
            },
            {
              title: '郭富城',
              key: '郭富城',
              children: [
                { key: '郭富城-01', title: '郭富城1' },
                { key: '郭富城-02', title: '郭富城2' }],
            },
          ],
        },
      ];

  • RangePicker（时间选择）

    API

    Props

    | 属性 | 说明 | 类型 | 默认值 | | :----: | :---- | :---- | :---- | | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |

    Events

    | 事件名称 | 说明 | 回调参数 | | :----: | :---- | :---- | | ok | 点击确定按钮的回调 | function(dates: [moment, moment] | [string, string]) | | change | 日期范围发生变化的回调 | function(dates: [moment, moment] | [string, string], dateStrings: [string, string]) | | clear | 日期范围清空后的回调 | - | - |

    代码演示

    html

    <range-picker style="width:200px;" v-model="dates"></range-picker>

    javascript

    dates = ['2021-01-03T08:51:22.384Z', '2021-02-25T08:51:22.384Z'];

tabs切换

• 弹出框

  • TabsModal（tabs切换的modal）

    API

    Props

    | 属性 | 说明 | 类型 | 默认值 | | :----: | :---- | :---- | :---- | | title | 标题 | string|slot | - | | selectedTab(v-model) | 当前激活 tab 面板的 key | string | 无 | | tabList | 需要展示的所有的tab | Array<{tab:string,key:string}> | [] |

    注意：tabPanel可以通过tab的key值，slot="xxx" 自定义添加

    Events

    | 事件名称 | 说明 | 回调参数 | | :----: | :---- | :---- | | change | 切换面板的回调 | function(activeKey) {} | | close | 关闭modal的回调 | function() |

    Tab props

    | 属性 | 说明 | 类型 | 默认值 | | :----: | :---- | :---- | :---- | | title | tab标题 | string | - | | key | tab的唯一值 | string | - |

    代码演示

    html

     <tabs-modal ref="tabsModal"
                    v-model="activeTabKey"
                    :title="modelTitle"
                    :tab-list="tabs">
          <!--基本信息-->
          <a-card slot="jbxx"
                  :bordered="false"
                  :bodyStyle="{padding:0}"
                  :headStyle="{padding:0,border:0}">
            <h1>基本信息：这个就是一个tab页的content</h1>
          </a-card>
        
          <!--家庭信息-->
          <a-card slot="jtxx"
                  :bordered="false"
                  :bodyStyle="{padding:0}"
                  :headStyle="{padding:0,border:0}">
            <h1>家庭信息：这个就是一个tab页的content</h1>
          </a-card>
        
          <!--学历信息-->
          <a-card slot="xlxx"
                  :bordered="false"
                  :bodyStyle="{padding:0}"
                  :headStyle="{padding:0,border:0}">
            <h1>学历信息：这个就是一个tab页的content</h1>
          </a-card>
        </tabs-modal>

    javascript

    tabs = [
        { tab: '基本信息', key: 'jbxx' },
        { tab: '家庭信息', key: 'jtxx' },
        { tab: '学历信息', key: 'xlxx' },
      ];
        
      activeTabKey = 'jtxx';
        
      modelTitle = '个人简历';
        
      showModal() {
        const { tabsModal } = this.$refs;
        if (tabsModal) {
          (tabsModal as any).show();
        }
      }