Like it and see. Make it a habit
In this paper,
GitHubGithub.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.
Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.
Cut to the chase
Demo address: www.longstudy.club/vue-okr-tre…
Github address: github.com/qq449245884…
Project background
Because the company needs to make an OKR recently, there is an alignment view in OKR, which is a numeral-type structure, as shown in the figure below:
If someone aligns my KR, I put it to my right, and if I align someone’s KR, I put it to my left, like a superior and subordinate relationship, so HERE I use two trees to represent the relationship between the left and the right.
After searching GitHub for a while, there were few such components and none that fit the business requirements, so I decided to build my own wheels!
Analysis of the
- Since it’s a tree, each node should be the same component
- A node has nodes underneath it, so the node component should be a recursive component
- The entire tree should have a global state that manages the values that are passed in from the outside and the properties and methods that are provided to the outside.
- Each phase tree node should also have a corresponding node state to manage its own properties and methods.
Implementation approach
Recursive components
For recursive components, the Vue official documentation says:
A component can recursively call itself within its template. However, this can only be done if it has the name option.
Here I use okrtreenode. vue to represent the nodes of the tree, which is used recursively like this. Here is the component simplification:
<template> <OkrTreeNode v-for="child in leftChildNodes" :node="child" ></OkrTreeNode> </template> export default { name: 'OkrTreeNode' }Copy the codeTwo things to note when using a recursive component are the component name and the condition that ends the recursion.
The state of the tree
For the tree state, I use a TreeStore class, which mainly refers to the Tree component in ElementUI. The properties in TreeStore represent the pros or attr or events and methods I passed in from the outside, all managed in this object. The code can be seen here:
Github.com/qq449245884…
Node status
For the Node state, I use a Node object to represent the code can be seen in the following address, which will not be expanded here:
Github.com/qq449245884…
The Demo presentation
Basic usage
The basic tree structure is displayed, vertical by default.
The horizontal direction
Setting the direction property to horizontal shows the horizontal direction.
Whether the node can be expanded
Nodes can be expanded. By default they are not. The node can be expanded by show-collapsable.
All nodes are expanded by default
Default-expand-all expands all nodes by default. This parameter is valid only when show-collapsable is true
You can set some nodes of a Tree to be expanded by default
Set the node expanded by default using default-expanded-keys. Note that node-key must be set. The value is the name of a field in the node data, which is unique in the entire tree.
Node style
You can set the default style of the node and the selected style.
The label-class-name command is used to set the style of a node. Characters and functions are supported. Run the current-lable-class-name command to set the selected style of the current node. Characters and functions are supported.
Node user-defined content
You can set the node content by yourself. Render the node content with render-content.
Node animation
Multiple transition animations are built into this component and can be used directly. The default transition animation is okr-Zoom-in-Center. See the API documentation at the bottom for more animations.
AnimateName specifies the animation type. The default animation is okr-Zoom-in-Center.
OKR display mode
This pattern appears to achieve the same effect as the view shown in the flying book OKR, so in Tree mode, it expands to two subtrees. The schema must have onlyBothTree set and a structure that represents the left subnumber via leftData.
OKR displays the custom node content of the schema
As with the regular Tree, we can also customize the content of the node through a custom render function.
Render the node’s content with render-content and determine if it is the left tree by returning the isLeftChild in node.
Node filtering (non-expansible) and supported methods
To filter Tree nodes by keywords, call the filter method of the Tree instance. The parameter is keyword. Note that filter-node-method is set to filter function.
Node filtering (can be expanded)
To filter Tree nodes by keywords, call the filter method of the Tree instance. The parameter is keyword. Note that filter-node-method is set to filter function.
Supported events (non-expansible)
The events supported when unexpanded are node click and right mouse click.
Supported events (which can be expanded)
The events supported for expansibility are node click, right mouse click, node expansion and node closure.
Attributes
| parameter | instructions | type | An optional value | The default value |
|---|---|---|---|---|
| data | Display data | array | – | – |
| direction | The direction of the tree expansion | String | horizontal / vertical | vertical |
| onlyBothTree | The subtree expands to the left and right of the root node. This mode is valid only if the direction is horizontal and the leftData data must be provided | Boolean | – | false |
| leftData | Displays the data for the left subnumber, which is enabled in onlyBothTree mode | array | – | – |
| label-width | The width of the node, which defaults to automatic width. If label-width is number, unit: px; If label-width is string, the width is set to the node’s style.width value, and the node’s width is controlled by the external style | string/number | – | – |
| label-height | Node height. The default height is automatic. If label-height is number, unit: px; If label-height is string, the height is set to the style.height value of the node, and the height of the node is controlled by the external style | string/number | – | – |
| label-class-name | The callback method for the className node can also use a string to set a fixed className for all nodes | Function(node)/String | – | – |
| current-lable-class-name | The style of the currently selected node | Function(node)/String | – | – |
| show-collapsable | Whether the node can be expanded | Boolean | – | false |
| default-expand-all | Whether to expand all nodes by default. This parameter is valid only when show-collapsable is true | Boolean | – | false |
| render-content | Render Function for the content area of the tree node | Function(h, node) | – | – |
| props | Configuration options, see the following table | object | – | – |
| node-key | Each tree node is used as a unique identifier. The entire tree should be unique | String | – | – |
| default-expanded-keys | An array of nodes’ keys that are expanded by default. (Note that node-key must be set to the name of a field in the node data that is unique in the entire tree.) | array | – | – |
| filter-node-method | Method used to filter a tree node, returning true to indicate that the node can be displayed or false to indicate that the node is hidden | Function(value, data, node) | – | – |
| niamte | Whether to enable transition animation for node expansion | Boolean | – | false |
| animate-name | Name of transition animation. The supported animation types are OKr-fade-in-Linear/Okr-fade-in /okr-zoom-in-center/ OKr-zoom-in-top/OKr-zoom-in-bottom | String | – | okr-zoom-in-center |
props
| parameter | instructions | type | An optional value | The default value |
|---|---|---|---|---|
| label | Specifies that the node label is an attribute value of the node object | string, function(data, node) | – | – |
| children | Specifies that the node label is an attribute value of the node object | string | – | – |
## Events
| The name of the event | instructions | The callback parameter |
|---|---|---|
| node-click | The callback when the node is clicked | There are three parameters: the object corresponding to the Node in the array passed to the data property, the Node corresponding to the Node, and the Node component itself. |
| node-expand | The event that fires when a node is expanded | There are three parameters: the object corresponding to the Node in the array passed to the data property, the Node corresponding to the Node, and the Node component itself |
| node-collapse | An event that is triggered when a node is shut down | There are three parameters: the object corresponding to the Node in the array passed to the data property, the Node corresponding to the Node, and the Node component itself |
| node-contextmenu | This event is triggered when a node is right-clicked | There are four parameters: event, the object corresponding to the Node in the array passed to the data property, the Node corresponding to the Node, and the Node component itself. |
methods
| The method name | instructions | The callback parameter |
|---|---|---|
| filter | Filter the tree node | Accepts a parameter of any type as the first parameter in filter-node-method |
| getNode | Fetch a node from a Tree component by data or key. To use this method, you must set the node-key property | (data) To get the node’s key or data |
| setCurrentNode | To set the current selected state of a node with node, the Node-key property must be set with this method | (node) Node of the node to be selected |
| setCurrentKey | To set the current selected state of a node with a key, the Node-key property must be set with this method | (key) Specifies the key of the node to be selected. If it is null, the node is unhighlighted |
| getCurrentKey | Gets the key of the currently selected node. Using this method, the node-key property must be set, or null is returned if no node is selected | – |
| getCurrentNode | Gets data for the currently selected node, or null if no node is selected | – |
| remove | To delete a node from a Tree, the Node-key property must be set | (data) The ID of the node to be deleted, either data or node |
| append | Appends a child node to a node in the Tree | (data, parentNode) receives two parameters: 1. Data of the child node to be appended 2. The parent data, key, or node of the child node |
| insertBefore | Add a node to the front of a node in the Tree | (data, refNode) accepts two parameters: 1. Data of the node to be added 2. The data, key, or node of the node next to the node to be added |
| insertAfter | Add a node after a node in a Tree | (data, refNode) accepts two parameters: 1. Data of the node to be added 2. The data, key, or node that precedes the node to be added |
Browser Support
Modern browsers and Internet Explorer 10+.
If you think it is good, please help to give a STAR on Github. If you think what needs to be optimized, you can put forward a PR on Github.
The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.
communication
This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.