捷捷

V1

2022/02/07阅读:148主题:橙心

vue3+ts+setup语法糖实现一个无限嵌套的tree组件

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

Vue3的setup语法糖

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

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

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

上面的dataList,levelPadL,selectIds三个props是不用再return的,我们是可以直接在模板中使用。另外setup语法糖和setup勾子函数的区别是不能接受propscontext参数,但是多了一些全局变量,这里主要用到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: {
    typeArray as PropType<BaseOptions[]>,
    requiredtrue
  }
})

可以看到,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)
}

总结

整个组件还是蛮简单的,也是我们常常要用到的,这里主要是基于vue3+setup+TS来实现熟悉一下语法和新特性,大家也可以用来练练手,体验体验vue3,看它是否是真香,卷起来吧!!!

最后可以关注我的个人公众号,第一时间获得最新推送。 长按保存关注

分类:

前端

标签:

Vue.js

作者介绍

捷捷
V1