new Component: tree-menu

[JCHappytime]

TreeMenu.vue

TreeNode.vue

index.less @prefix-class: ~'n-tree'; @selected: #f0f9ff;

.@{prefix-class} { position: relative; border: 1px solid @colors[line]; border-radius: 4px; overflow: hidden; background: @colors[white];

ul { list-style: none; margin: 0; padding: 0;

li {
  list-style: none;
  margin: 0;
  white-space: nowrap;
  outline: none;
  box-sizing: border-box;
}

}

ul { margin: 0 0 -1px 0; }

&-item { width: 100%; padding: 12px 0; font-size: 13px; font-weight: normal; color: #222; box-sizing: border-box; cursor: pointer; border-bottom: 1px solid @colors[line];

&:hover {
  background: @selected;
}

&-arrow {
  .n-btn-only-icon.n-btn-small {
    width: 20px;
    height: 20px;
  }
  .n-icon {
    transform: rotate(-90deg);
  }
}

&-title {
  vertical-align: middle;
}

&-expand {
  .@{prefix-class}-item-arrow .n-icon {
    transform: rotate(0);
  }
}
&-selected {
  background: @selected;
  .@{prefix-class}-item-title {
    font-weight: 600;
  }
}

} &-empty-text { padding: 20px; display: block; text-align: center; } }