如何创建一个吸引人的wap手机网站视觉设计师作品集？

建wap手机网站,视觉设计师作品集,营销型网站的建设和运营,阿里巴巴国际站怎么找客户前端组件库造轮子——Tree组件开发教程 前言 本系列旨在记录前端组件库开发经验#xff0c;我们的组件库项目目前已在Github开源#xff0c;下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验#xff0c;开源分…前端组件库造轮子——Tree组件开发教程 前言 本系列旨在记录前端组件库开发经验我们的组件库项目目前已在Github开源下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验开源分享有问题的话也希望路过的大佬指正。 组件开发流程 组件递归 Tree组件算是比较有难度的组件了其核心功能其实就是实现树一样的联级结构。其实实现就是组件递归。 我们来复习一下递归代码 我们的递归代码实现必然是由一个函数和调用函数组成的。同理要实现组件递归也需要做类似的操作。 function dfs() {... }function Main() {dfs() }在组件递归中我们就需要类比递归函数的操作我们需要用一个组件node来作为递归组件这个组件起到主要渲染的作用并且需要一个tree组件来调用组件执行。 现在知道了大致思路我们在补充一下如何编写组件。 对于递归函数很重要的一点我们如何让他不断递归同时让他停下来。 我们可以利用props把参数传进去然后在渲染的时候去判断有没有孩子如果没有孩子就不渲染这个可以用v-if来完成。 // node 组件中 div v-ifisRender v-showitems.isOpennodev-for(child, index) in items.children:keyindex:itemschild:labellabel:childrenchildren/node /div// 判断是否要渲染 const isRender computed(() {return (props.items.children props.items.children.length); });那这样我们就可以实现node组件的正确递归所以我们只需在tree组件中在调用一次node组件就可以了。 div classtreenodev-for(item, index) in copyData:keyindex:itemsitem:labellabel:childrenchildren/node/div深拷贝和初始化 还没完我们需要对传进来的数据做一些深拷贝和初始化。 为什么要深拷贝应该知道吧vue中props是单向数据流我们是不能直接修改的因此我们需要深拷贝一份来操作。 const deepCopy (target: any, hash_table new WeakMap()) {if (typeof target object) {let clone Array.isArray(target) ? [] : {};if (hash_table.get(target)) return hash_table.get(target);hash_table.set(target, clone);for (const key in target) {clone[key] deepCopy(target[key], hash_table);}return clone;} else {return target;} };为什么要初始化呢因为在开发tree还需要预设置很多数据例如是否展开那需要实现展开的功能那么每个节点必然需要一个isOpen来控制除此之外还有很多其它的功能比如判断层级等。