上一小节我们实现了SvgIcon
组件来支持组件开发中用到字体图标的地方,并应用在了tree节点折叠、展开的图标上,本小节我们将其用到tree的插槽内容中,一起来学习基于Vue3 tsx的插槽用法吧~
先看要实现的效果:
![](https://i-blog.csdnimg.cn/direct/941e428056b1470aa136e6d4a91c4f2a.gif)
要实现的文档部分:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ac2b8b9c16ec4fc0a78a08088dd85ebe.png)
完善vitepress文档
这里判断父节点和叶子节点分别用不同的颜色来填充。
![](https://i-blog.csdnimg.cn/direct/210f878ea3f04360b0b08c5aee2bb726.png)
编写带有slots
的tree组件用法示例
![](https://i-blog.csdnimg.cn/direct/5212affd9a7c420a8d9d1f076d9b0f8e.png)
完善tree组件
需要在setup
方法参数中注入slots
。
样式调整:
![](https://i-blog.csdnimg.cn/direct/f2a972ea770d4e3bb7f18b4eb85423c6.png)
tree样式新增内容:
![](https://i-blog.csdnimg.cn/direct/f444e880e0d7482b853398ff509762a2.png)
最后是slots
的用法:
![](https://i-blog.csdnimg.cn/direct/1b43eced40164b529b7933d4cc1d3374.png)