记录基于Vue.js的Tree组件_Liquor Tree

酒树 (Liquor Tree)

A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.

Vue 树组件，可让您以美观和逻辑的方式呈现层次结构的数据。

supports mobile, and has a variety of response events. Flexible configuration options, and support for keyboard navigation.

支持移动，并具有各种响应事件。 灵活的配置选项，并支持键盘导航。

View demo 查看演示 Documentation

github 地址 ：

GitHub - amsik/liquor-tree: Tree component based on Vue.js 

Vue 官方地址 ：

Liquor Tree

---

酒树（ Liquor Tree ）

Vue 树组件，可让您以美观合理的方式呈现层次结构化的数据。

产品特点 ：

• 拖放 移动友好
• 每个动作的事件
• 灵活的配置
• 每页任意数量的实例
• 多选
• 键盘导航
• 过滤
• 分类
• 与 Vuex 集成

---

入门 ：

安装 ：

Npm:

$ npm install liquor-tree

Yarn:

$ yarn add liquor-tree

要在自己的计算机上运行该演示，请执行以下操作：

克隆此存储库

npm install （ npm安装 ）

npm run build （ npm运行构建 ）

npm run storybook

访问 http://localhost:9001/

这里有很多例子供您参考。 所有来源都位于 liquor-tree/docs/storybook/stories

---

它必须安装到 VueJS 实例中。请查看官方文档，了解如何使用 VueJS 组件 components

（当然，如果需要的话）。
您不需要关心样式，它们会自动附加到文档中。
当与模块系统一起使用时，有三种方法可以注册组件（可能更多…我不知道）。
好了，下面这是我们的方式：

import Vue from 'vue'
import LiquorTree from 'liquor-tree'

// global registration
Vue.use(LiquorTree) // 第一种

// or
Vue.component(LiquorTree.name, LiquorTree) // 第二种

// or
import LiquorTree from 'liquor-tree'

// local registration
export default {
  name: 'your-awesome-component',
  components: {
    [LiquorTree.name]: LiquorTree // 第三种
  },
  ...
}

要注册库，您可以在我上面提到的3种方法之间进行选择。

当直接在浏览器中使用时，您可以通过CND包含 liquor-tree（这是库的最新版本）： 

---

Usage 用法

---

Development

Check out the package.jsons script section. There are 2 scripts:

• npm run dev - it will open browser and you can play with code
• npm run build - it will craete a module file in production mode

---

Component Options 组件选项

Name 名称	Type 类型	Default	Description 描述
multiple	Boolean	true	Allows to select more than one node. 允许选择多个节点
checkbox	Boolean	false	checkbox mode. It shows checkboxes for every node 复选框模式。它显示每个节点的复选框
checkOnSelect	Boolean	false	For checkbox mode only. Node will have checked state when user clicks either text or checkbox 仅用于复选框模式。当用户单击文本或复选框时，节点将处于选中状态
autoCheckChildren	Boolean	true	For checkbox mode only. Children will have the same checked state as their parent. 仅用于复选框模式。子级将具有与其父级相同的选中状态。
parentSelect	Boolean	false	By clicking node which has children it expands node. i.e we have two ways to expand/collapse node: by clicking on arrow and on text 通过单击具有子节点的节点，可以展开节点。即，我们有两种方法来展开/折叠节点：单击箭头和文本
keyboardNavigation	Boolean	true	Allows user to navigate tree using keyboard 允许用户使用键盘浏览树
propertyNames	Object	-	This options allows the default tree’s structure to be redefined. See example 此选项允许重新定义默认树的结构。见示例
deletion	Boolean | Function	false	If keyboardNavigation is false this property is ignored. This property defines deletion behaviour. See example 如果 keyboardNavigation 为 false ，则忽略此属性。此属性定义删除行为。见示例
fetchData	Object	-	See guide
dnd	Object	-	See guide   请参阅指南
editing	Object	-	See guide

---

Structure 结构

The component has only two props: data and options. 该组件只有两个支柱：数据和选项。

• property options - This property defines tree behavior. 属性选项-此属性定义树行为
• property data - Array-like object that defines tree nodes. 属性数据-定义树节点的类似数组的对象