vite+vue3+setup+ts开发一个tree组件

43 阅读 0 评论 29 点赞

我是靠谱客的博主超帅板凳，最近开发中收集的这篇文章主要介绍vite+vue3+setup+ts开发一个tree组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天用vue3+ts+setup语法糖实现一个无限嵌套的tree组件，先看一下实现的效果，样式没有做过多的修饰。本篇文章是很基础的内容，本人主要也是刚接触vue3这一套。最近也开始练手将公司开发时的一些vue2的组件用vue3来实现一套，也希望看到的人能有所获。

Vue3的setup语法糖

vue3中的setup的加入，使得vue可以从Options API转变为Composition API。Options API会导致data, methods, computed等必须分开到不同的对象中实现，使得逻辑过于分散。而Componsitions API可以将同一个功能写在setup中同一个代码块中，而不需要分开来写。有些同学可能觉得一个组件所有功能写在一起，会导致所有代码都在一坨，反而容易导致逻辑混乱，其实完全不必担心，vue3可以像react hook一样，把一段逻辑抽离，一个逻辑就是一个代码块，再在组件里面引入，这样逻辑清晰，同时方便复用，也取代了vue2中mixin的写法。看下面这张图就明白了：

在setup语法糖中，我们不需要使用return返回响应式变量，函数，组件，只需要在组件顶层声明即可，然后可以在html模板中直接使用，看下面一段代码：

const {dataList, levelPadL, selectIds} = defineProps({
  // 数据源列表
  dataList: {
    type: Array as PropType<BaseOptons[]>,
    required: true
  },
  // 层级缩减，默认10px
  levelPadL: {
    type: Number,
    default: 10
  },
  // 已选中的id集合
  selectIds: {
    type: Array,
    default: []
  }
})

上面的dataList,levelPadL,selectIds三个props是不用再return的，我们是可以直接在模板中使用。另外setup语法糖和setup勾子函数的区别是不能接受props和context参数，但是多了一些全局变量，这里主要用到defineProps,defineEmits。前者用来声明组件需要接受的props，后者用来接受来自父组件的事件，这里我们的tree组件需要接受一个更新选中的事件，这里的想法是能实现props的双向绑定，所以props selectIds采用了vue3的新语法v-model:selectIds来实现的，看下面的代码：

const emits = defineEmits(['update:selectIds'])
// some change 
emits('update:selectIds', selectIds)

Ts的运用及Vue3中的ts

首先我们为了props能有类型提醒，我们需要定义我们的props类型，这里主要是tree组件接受到的一个dataList的类型，是一个无限嵌套的的数组：

export interface BaseOptions {
    label: string,
    value: string | number,
    children?: BaseOptions[]
}
// 引用该类型并使用
const dataList = reactive<BaseOptions[]>([{
  label: '周一不开心',
  value: '1',
  children: [
    {label: '不开心1', value: '1-1', children: [{label: '不开心1-1', value: '1-1-1'}]},
    {label: '不开心2', value: '1-2', children: [{label: '不开心2-1', value: '1-2-1'}]},
    {label: '开心3', value: '1-3', children: [{label: '开心1-3-1', value: '1-3-1', children: [{label: '开心1-3-2', value: '1-3-2'}]}]}
  ]
}])
// 接受该类型props并标记类型
defineProps({
  // 数据源列表
  dataList: {
    type: Array as PropType<BaseOptions[]>,
    required: true
  }
})

可以看到，vue3中定义reactive中需要使用ts的泛型才能标记类型。而如果props的类型如果采用运行时声明的方式，当props的类型为Object或者Array时，则需要使用Array as PropType<BaseOptions[]>来标记类型，相比常规ts的用法，还是麻烦不少。

组件其他部件

组件使用到了一个双向绑定的props selectIds,与vue2相比略有区别：v-model:selectIds="selectIds"，这样可以更灵活一些。子组件修改该props同样是通过emits(update:propsName)。

模板部分

<ul class="treeList" :style="{'padding-left': `${levelPadL}px`}">
    <li v-for="item in dataList" class="item" :key="item.value" :class="{'hasChild': item?.children?.length}">
      <div class="label" :class="{'is-open': isOpen(item.value)}" @click="toggleItem(item)">
        <span>{{item.label}}</span>
        <span class="icon" v-if="item?.children?.length"></span>
      </div>
      <collapseTransition>
        <template v-if="isOpen(item.value)">
          <treeList v-bind="$props" :data-list="item.children"></treeList>
        </template>
      </collapseTransition>
    </li>
  </ul>

可以看到vue3的模板中，终于可以使用.?可选链新语法了，实在太爽了，不会因为对象或数组的空指针导致整个dom不渲染了。collapseTransition动画组件是基于vue2实现了，看来是完全兼容的。

组件方法

// 展开收起方法
const toggleItem = (item: BaseOptions) => {
  const {value, children = []} = item
  if (children.length) {
    const findIndex = selectIds.findIndex(id => value === id)
    if (findIndex > -1) {
      selectIds.splice(findIndex, 1)
    } else {
      selectIds.push(value)
    }
    emits('update:selectIds', selectIds)
  }
}

// 判断是否展开
const isOpen = (id: Number | String) => {
  return !!selectIds.find(item => id === item)
}