vue-teatree: simple and extensible treeview component for Vue JS

栏目: IT技术 · 发布时间: 4年前

内容简介:A simple treeview component for VueJS with no added dependencies.

:tea: Vue Teatree

A simple treeview component for VueJS with no added dependencies.

vue-teatree: simple and extensible treeview component for Vue JS

Install

yarn add vue-teatree # (or use npm)

https://www.npmjs.com/package/vue-teatree

Example

  1. Import your components:
import { Teatree, NodeType, NodeName, NodeToggle } from "vue-teatree";
Teatree
NodeType
NodeName
NodeToggle

NodeName and NodeToggle are provided as a convenience. Feel free to write your own.

  1. Prepare your data
const data: NodeType[] = [
  {
    name: "parent",
    show: true,
    showChildren: true,
    selected: false,
    children: [
      {
        name: "child",
        show: true,
        showChildren: true,
        selected: false,
        children: [
          {
            name: "grandchild",
            show: true,
            showChildren: true,
            selected: false,
            children: [],
          },
        ],
      },
    ],
  },
];
  1. Pass it into Teatree
<Teatree :roots="data">
  <template slot="node-toggle" slot-scope="{ node }">
    <NodeToggle :node="node" />
  </template>
  <template slot="node-name" slot-scope="{ node }">
    <NodeName
      :node="node"
      :handleNodeLeftClick="() => {}"
      :handleNodeRightClick="() => {}"
    />
  </template>
</Teatree>

More details

  1. The Teatree treeview is purely a function of your data. If you want to make changes to the treeview (e.g. toggling children, hiding nodes etc.) you should modify the data object.
  2. NodeToggle and NodeName can be replaced with your own components and passed into the node-toggle and node-name slots respectively.

NodeType

Teatree accepts an array of NodeType as its roots prop. This means you can render multiple roots in the treeview.

interface NodeType {
  // show: toggling this will show/hide the node and its children
  show: boolean;
  // showChildren: toggling this will toggle its children
  showChildren: boolean;
  // selected: toggling this will apply the "selected" CSS style
  selected: boolean;
  // children: the children must also conform to the node specification
  children: Array<NodeType>;
  // name: the name of the node
  name: string;
  // icon: base64 encoded icon (optional)
  icon?: string;
  // data: payload by the user of the library (optional)
  data?: object;
}

NodeToggle

It is a pre-built component to render the node's toggle. If you want to implement your own, take a look at the source code!

Props:

Name Type Required Notes
node NodeType Yes

NodeName

It is a pre-built component to render the node's name. If you want to implement your own, take a look at the source code!

It has a number of props that can be wired up to provide additional functionality (track clicks etc.):

Name Type Required Notes
node NodeType Yes
handleNodeLeftClick (event: any, node: NodeType) => any Yes Pass an empty function () => {} if you don't have one.
handleNodeRightClick (event: any, node: NodeType) => any Yes Pass an empty function () => {} if you don't have one.

Styling

Import default styles using: @import "~vue-teatree/build/Teatree.css";

Here are all the default styles. Override them to your liking:

Teatree

.teatree {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
}

.teatree-node {
  padding-right: 0.25rem;
}

.teatree-node-item {
  display: flex;
  align-items: center;
  height: 1.5rem;
  background: transparent;

  /* hack to make hover the full width of parent */
  padding-left: 100%;
  margin-left: -100%;
  padding-right: 100%;
  margin-right: -100%;
}

.teatree-node-item:hover {
  background-color: #718096;
}

.teatree-node-item-selected {
  background-color: #718096;
}

.teatree-node-item-name-padded-leaf {
  padding-left: 1.25rem;
}

NodeToggle

.teatree-node-item-icon {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  color: #cbd5e0;
}

NodeName

.teatree-node-item-name {
  display: inline-block;
  font-size: 0.875rem;
  color: #a0aec0;
  margin-left: 0.5rem;
  user-select: none;

  /* truncate */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teatree-node-item-name-padded {
  padding-left: 1.5rem;
}

Common use cases

The following code/advice is not well tested. Apologies for any errors.

Toggle everything shut

You can achieve an effect similar to VSCode where you can toggle/collapse all nodes closed. You need to write a simple tree-traversal:

const toggleTreeClosed = (rootNode: NodeType) => {
  rootNode.showChildren = false;
  rootNode.children.forEach((child) => toggleTreeClosed(child));
};

Hide leaves

If you're using the treeview for a file explorer, it might be useful to hide the leaves, and only show the parent directories. You can use the show node property to hide the leaf nodes.

const isLeaf = (node: NodeType) => {
  return !node.children.length;
};

const hideTreeLeaves = (rootNode: NodeType) => {
  if (isLeaf(rootNode)) {
    rootNode.show = false;
  } else {
    rootNode.children.forEach((child) => hideTreeLeaves(child));
  }
};

Show a right-click menu

You'll need something like: https://github.com/rawilk/vue-context .

Use the handleNodeRightClick component prop to call the context menu:

export default class MyComponent extends Vue {
  handleNodeRightClick(node: NodeType, event: any) {
    this.$refs.menu.open(event, node);
  }
}
<vue-context ref="menu">
  <template slot-scope="child">
    <your-menu-component :node="child.data" />
  </template>
</vue-context>

以上所述就是小编给大家介绍的《vue-teatree: simple and extensible treeview component for Vue JS》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The  C Programming Language

The C Programming Language

Brian W. Kernighan、Dennis M. Ritchie / Prentice Hall / 1988-4-1 / USD 67.00

Presents a complete guide to ANSI standard C language programming. Written by the developers of C, this new version helps readers keep up with the finalized ANSI standard for C while showing how to ta......一起来看看 《The C Programming Language》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具