Refactor Cascader

[ImJustAMan]

Tasking

• 级联面板与选择器共有
  • 级联菜单列表
    • 通过options进行渲染
      • options的默认类型为Array<{value: string | number, label: string, children?: typeof options, disabeld?: boolean, leaf?: boolean}>
        • value 配置选项的值
          • 可以通过 props.value 配置选项的value对应options中的key (value = options[props.value]) (默认值为value)
        • label 配置选项的标签
          • 可以通过 props.label 配置选项的label对应options中的key (label = options[props.label]) (默认值为label)
        • children 配置当前节点的子选项
          • 可以通过 props.children 配置选项的children对应options中的key (children = options[props.children]) (默认值为children)
        • disabled 配置选项是否禁用
          • 可以通过 props.disabled 配置选项的disabled对应options中的key (disabled = options[props.disabled]) (默认值为disabled)
        • leaf 配置当前节点是否为叶节点(主要供给动态加载使用)
          • 可以通过 props.leaf 配置选项的leaf对应options中的key (leaf = options[props.leaf]) (默认值为leaf)
    • 触发下级菜单
      • click 方式触发[默认]
        • mouseenter 方式进行触发
      • 触发自定义expand-change事件[参数：当前展开节点及其所有父选项值组成的数组]
    • 选中节点
      • 触发自定义change事件[参数：选中节点的值]
      • 选中节点分为三种情况
        • 默认情况下仅能选中叶节点
        • props.multiple === true 时 仅能通过点击复选框进行选择节点
        • props.checkStrictly === true 时 全部节点均可被选定 但只能通过点击单选框/复选框进行选择
      • props.emitPath 决定返回节点的数据
        • true 返回节点所在的各级菜单值所组成的数组
        • false 仅返回该节点值
    • 通过 slots 实现自定义选项内容 拥有两个参数
      • node 当前节点
      • data 当前数据
    • 暴露getCheckedNodes获取选中节点
      • 通过参数判断是否仅获取叶节点(此判断在elementui未表现出不同 待研究)
    • 动态加载节点
      • props.lazy: boolean 配置是否开启动态加载[默认值false]
      • props.lazyLoad: function 配置加载动态数据的方法 拥有两个参数
        • node 当前节点
        • resolve 加载完成的回调 必须执行
        • 调用resolve方法并将加载的节点传入便可正常加载子节点内容
      • lazy 与 lazyLoad 必须配合使用
        • props.lazy === false 时lazyLoad不被触发
        • 仅有lazy属性时无法正确加载内容
• 级联选择器独有
  • 路径展示框中显示选中数据
    • 通过show-all-levels配置是否显示选中节点完整路径
    • 当配置多选时在路径展示框中通过ElTag的方式进行展示
      • tag标签可折叠为两个tag 其中第一个tag为第一项 第二个为其余总计
      • 通过collapse-tags配置可折叠显示tag
  • 级联下拉框显示状态切换
    • 点击路径展示框 展开/隐藏
    • 选中节点时 隐藏
    • keydown.enter 展开/隐藏
    • 点击其他区域 隐藏
    • 切换时触发visible-change事件 参数为 显示->true 隐藏->false
  • 设置尺寸 三个可选属性
    • medium
    • small
    • mini
    • 不设置是为默认大小 尺寸大于以上三个选项
  • 设置placeholder [默认：请选择]
  • 允许通过disabled设置级联选择器禁用(此设置是将整个级联选择器禁用 禁用选项通过options设置disabled属性即可)
  • 允许通过clearable设置级联选择器可清空
    • props.clearable === true 显示清空按钮"X"
    • 点击清空按钮清空数据
  • 多选
    • 每个tag均可删除
    • 删除时触发自定义remove-tag事件
  • 配置选项分隔符
    • 通过separator配置 默认为 /
  • 可搜索选项
    • 通过filterable进行配置 默认值 false
    • 配置可搜索后路径展示框为输入框 可输入搜索关键词
    • 输入内容后弹出筛选列表
      • show-all-levels 配置筛选列表中是否展示完整路径
    • 可通过传入filter-method配置自定义筛选规则 会传入两个参数
      • node 选项节点
      • keyword 搜索关键词
      • 此方法需要返回一个布尔值 为 true 时表示该节点符合规则
    • 可通过debounce属性配置关键词搜索的防抖延迟 单位ms 默认值300
    • 可传入before-filter方法在筛选之前进行操作
      • 接收一个参数为输入的值
      • 当返回false时停止筛选
      • 当返回reject状态的promise时停止筛选
    • 配置浮层类名
      • 通过popper-class进行配置
    • 输入框失焦/聚焦时触发方法
      • focus 聚焦时触发 参数为事件对象
      • blur 失焦时触发 参数为事件对象

[ImJustAMan]

修改Node.js 与 Store.js逻辑有可能会引起组件整体解构及逻辑的变化
本次重构组件计划仅对两个文件补充测试 以及可能的小幅度代码重构
不会重写两个文件

[ImJustAMan]

思路有问题
Node.js本身不太便于进行测试
直接对CascaderNode.vue进行测试
测试时通过mock Node.js导出的Node类应该就可以了