Vue

@lite-tree/vue是一个Vue组件，用于渲染树形结构。

安装

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

配置

如果使用默认slot传入数据，需要在vite.config.ts中配置：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  vue:{
    template: {                      
      compilerOptions: {
        whitespace: 'preserve'
      }
    }
  }
})

使用

为LiteTree提供数据，可以通过slot或者data属性传入。

• slot

import { LiteTree } from "@lite-tree/vue";

<LiteTree>
// 这里是树形数据
</LiteTree>

注意

需要设置whitespace: 'preserve',这是为了保留Markdown中的空格，以便LiteTree可以正确解析lite格式的树数据。

• data属性。

import { LiteTree } from "@lite-tree/vue";

<LiteTree :data="`
// 这里是树形数据
`"</LiteTree>