当前位置:   article > 正文

记录基于Vue.js的移动端Tree树形组件_vue-treeselect

vue-treeselect

目录

一、Liquor Tree

入门 :

Development

Component Options 组件选项

Structure 结构

二、vue-treeselect

Introduction 介绍

Getting Started 入门


    Vue 树形选择器( Vue tree select )组件在搭建 Vue 的 app 中特别常用,Vue tree select 除了简单的树形结构外,还有非常多样的功能来配合不同场景的使用。比如搜索过滤,前端添加删除树枝,前端编辑修改子树名,拖拽排序,对用户操作事件记录等。本文记录了我自己使用多年最好用的 2 款 Vue tree select 组件,每一款都经过我实际测试,推荐给大家。


一、Liquor Tree

酒树 (Liquor Tree)

    Liquor Tree 是一款轻量级树形选择器,对移动端友好,可拖放,支持键盘快捷键,每个操作动作都有事件记录,与 Vue 高度整合。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

产品特点 :

  • 拖放 移动友好
  • 每个动作的事件
  • 灵活的配置
  • 每页任意数量的实例
  • 多选
  • 键盘导航
  • 过滤
  • 分类
  • 与 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

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

  1. import Vue from 'vue'
  2. import LiquorTree from 'liquor-tree'
  3. // global registration
  4. Vue.use(LiquorTree) // 第一种
  5. // or
  6. Vue.component(LiquorTree.name, LiquorTree) // 第二种
  7. // or
  8. import LiquorTree from 'liquor-tree'
  9. // local registration
  10. export default {
  11. name: 'your-awesome-component',
  12. components: {
  13. [LiquorTree.name]: LiquorTree // 第三种
  14. },
  15. ...
  16. }

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

当直接在浏览器中使用时,您可以通过CND包含 liquor-tree(这是库的最新版本): 

<script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>

Usage 用法

  1. <!-- Vue Component -->
  2. <template>
  3. <tree
  4. :data="items"
  5. :options="options"
  6. ref="tree"
  7. />
  8. </template>
  9. <script>
  10. import Vue from 'vue'
  11. import LiquorTree from 'liquor-tree'
  12. Vue.use(LiquorTree)
  13. export default {
  14. ...
  15. data() {
  16. return {
  17. items: [
  18. {text: 'Item 1'},
  19. {text: 'Item 2'},
  20. {text: 'Item 3', children: [
  21. {text: 'Item 3.1'},
  22. {text: 'Item 3.2'}
  23. ]},
  24. {
  25. text: '其他',
  26. children: [
  27. {
  28. text: '其他1',
  29. children: [
  30. { text: '其他1.1.1' },
  31. { text: '其他1.1.2' },
  32. { text: '其他1.1.3' },
  33. ],
  34. },
  35. {
  36. text: '其他2',
  37. children: [
  38. { text: '其他2.1.1' },
  39. { text: '其他2.1.2' },
  40. { text: '其他2.1.3' },
  41. ],
  42. },
  43. ],
  44. },
  45. ],
  46. options: {
  47. checkbox: true
  48. }
  49. }
  50. }
  51. ...
  52. }
  53. </script>

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/903349
推荐阅读
相关标签
  

闽ICP备14008679号