技術標籤：vue中align

介紹

Vue Teatree是一個不依賴第三方庫的Vue樹元件，簡單易用！

Github

https://github.com/sarimabbas/vue-teatree

安裝

yarn add vue-teatree # (or use npm)

範例

• 匯入元件

import { Teatree, NodeType, NodeName, NodeToggle } from "vue-teatree";

準備資料

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: [],          },        ],      },    ],  },];
 

Teatree樹檢視純粹是資料的功能。如果要更改樹檢視(例如，切換子代，隱藏節點等)，則應修改資料物件。NodeToggle和NodeName可以用自己的元件替換，並分別傳遞到node-toggle和node-name插槽中。

NodeType

Teatree接受NodeType陣列作為其根屬性。這意味著可以在樹檢視中渲染多個根。

interface NodeType {  // show: 切換此選項將顯示/隱藏節點及其子節點  show: boolean;  // showChildren: 切換此操作將切換其子級  showChildren: boolean;  // selected: 切換此選項將應用“選中的” CSS樣式  selected: boolean;  // children: 子代還必須符合節點規範  children: Array;  // name: 節點名稱  name: string;  // icon: base64編碼的圖示(可選)  icon?: string;  data?: object;}
 

NodeToggle

它是用於渲染節點切換的預構建元件。如果想實現自己的程式碼，可以看一下原始碼！

• 屬性

NodeName

樣式

預設匯入

@import "~vue-teatree/build/Teatree.css"

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;}

顯示右鍵選單

可以參考：https://github.com/rawilk/vue-context

export default class MyComponent extends Vue {  handleNodeRightClick(node: NodeType, event: any) {    this.$refs.menu.open(event, node);  }}

使用handleNodeRightClick元件prop呼叫上下文選單