这个Vue树组件非常适合在vitepress中使用

vitepress是Vue官方出品的一款非常方便的静态网站生成工具，采用的Vue技术栈，可以在markdown文件里面直接使用Vue组件。

但是官网没有提供树组件，也没有找到合适的在这种静态场景下使用的树组件。

我们知道，Vue树组件非常多，一般情况下，但是在vitepress上使用这些组件时，会有一些问题，比如样式冲突、体积过大、功能太多等问题，这与VitePress这种以展示为主的场景显示格格不入。特别是传递树数据时，一般是通过props传入的，这样在vitepress上使用时，就会显得非常麻烦。

所以，我开发了这款非常简单的vue树组件，它的特点是：

体积小，不依赖任何第三方库
样式简单，功能小巧
通过默认slot传递树数据，非常方便
树数据具备良好的容错性，简单地说，可以处理一些非标JSON数据，更加方便.
支持自定义节点样式、标签、备注等

官网

安装

npm install lite-tree
// or
yarn add lite-tree
// or
pnpm add lite-tree

使用方法

在vitepress中使用

<script setup>
import Tree from 'lite-tree'
</script>

<Tree>
    {
        title: "A公司",
        expend: true,
        children:[          
        {
            title: "行政中心",
            children:[
                {title: "{color:red;font-weight:bold;}总裁办"},
                {title: "人力资源部",tags:['{color:red;}重点','{success}紧急']},
                {title: "财务部",mark:"success"},
                {title: "行政部"},
                {title: "法务部",mark:"warning"},
                {title: "审计部",style:"font-size:16px;font-style:italic"},
                {title: "信息中心",memo:"备用"},
                {title: "安全保卫部",memo:"{color:red}+"}
            ]
        },
        { 
            title: "市场中心",
            children:[
                {title: "市场部",mark:"info",tags:['{error}出错','{warning}警告']},
                {title: "销售部"},
                {title: "客服部"},
                {title: "品牌部",mark:'error'},
                {title: "市场策划部"},
                {title: "市场营销部",memo:"好",tags:["{info}ddddd"]}
            ]
        },
        {
            title: "研发中心",
            children:[
                {title: "移动研发部",mark:"warning"},
                {title: "平台研发部",tags:["{success}Java","{error}Go"]},
                {title: "测试部"},
                {title: "运维部"},
                {title: "产品部",mark:"success"},
                {title: "设计部"},
                {title: "项目管理部",memo:"{color:red;}+"}
            ]
        }
        ]
    }
</Tree>

最终的渲染效果如下：在这里插入图片描述

说明

树数据的格式可以是JSON，并且具备一定的容错性:
- 节点Key可以使用"..."或'...'包裹，也可以省略。
- 字符串Value可以使用"..."或'...'包裹
- 如果不小心漏掉了,号，也是可以补全的。
节点数据声明如下：

{
    "title": "A公司",       // 节点标题，显示用
    "open": true,           // 是否展开
    "style": "color:red",   // 节点CSS
    "mark": "success",      // 节点标记，取值为`success`、`info`、`warning`、`error`
    "tags": ["",""],        // 
    "comment::"注释",
    "children":[
        // 子节点
    ]
}

节点title,mark或tags字符串前置{...}包裹来声明css样式，如tags:["{color:red;font-weight:bold;}OK","{color:blue}+"]代表OK为红色加粗，+为蓝色。
每个节点可以通过mark来预置标记，取值为success、info、warning、error，分别代表成功、信息、警告、错误。分别用不同的颜色渲染。
节点可以通过style来声明css样式。
支持事件？暂不支持，因为本组件主要是用在vitepress静态页面中进行静态显示，所以目前不支持事件。

这个Vue树组件非常适合在vitepress中使用

安装

使用方法

说明

推荐