前端工具集

文件选择器

使用方法

  const selector = zhjs.useFileSelector({
    multiple: true,
    // 参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#accept
    accept: '.jpg,.png'
  })
  selector.openFileDialog()
    .then(files => {
      // TODO: use files here
    })

数组转树

使用方法

  const arr = [
    { id: 10, pid: 9 },
    { id: 9, pid: 5 },
    { id: 8, pid: 5 },
    { id: 7, pid: 2 },
    { id: 6, pid: 1 },
    { id: 5, pid: 1 },
    { id: 4, pid: 1 },
    { id: 3, pid: 0 },
    { id: 2, pid: 0 },
    { id: 1, pid: 0 },
    { id: 0, pid: null }
  ]
  // output: 树形结构
  const tree = zhjs.arrayToTree(arr, { parentProperty: 'pid' })
  // getRootNode
  console.log(tree.getRoot())
  // getLevelChildren
  console.log(tree.getLevel(1))
  // output 1 2 3
  console.log(tree.find(9))
  // output { id: 9, pid: 5 }
  console.log(tree.sort((a, b) => a.id - b.id))
  // sort by node.id, from low to height
  console.log(tree.getRoot().flat())
  // return flat tree nodes array

TODO:

• Tree增加update方法 传入数组对整棵树进行动态更新
• 移植ahook.useRequest部分功能

changelog

• 0.1.4 修复文件选择器初始化时配置项不生效的问题
• 0.1.5 调整arratToTree返回类型为Tree 增加Tree类型的公开方法getRoot和getLevel
• 0.1.6 修复 Tree.getLevel无法获取0层节点 的问题 增加Tree类型的公开方法find用于获取给定customID的节点
• 0.1.7 增加Tree.sort公开方法，对每个children进行排序，参考Array.sort 增加Tree.getArray方法，获取树的源数组
• 0.1.8 增加TreeNode.flat方法，返回打平后的TreeNode数组 修复Tree根节点如果在给定的源数组中存在时，不能正确往TreeNode.data中插入数据的问
• 0.1.9 增加Tree模块的单元测试 增加Tasker类 增加FileSelector.dispose手动释放内存的方法 修复FileSelector类取消弹窗事件无法触发的问题
• 0.1.10
  修复FileSelector.openFileDialog返回的文件对象延迟之后被释放的问题