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

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

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

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

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

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

官网

安装

bash 复制代码
npm install lite-tree
// or
yarn add lite-tree
// or
pnpm add lite-tree

使用方法

vitepress中使用

md 复制代码
<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可以使用"..."'...'包裹
    • 如果不小心漏掉了,号,也是可以补全的。
  • 节点数据声明如下:

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

推荐

相关推荐
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军12 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy13 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端13 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿13 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉13 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~13 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan201515 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation16 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|16 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js