vikingowl/vue3-tree-list
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 💡 rename the slot name

Browse Source
This commit is contained in:
youxingzhi
2019-12-08 17:41:41 +08:00
parent c46c570c30
commit 22988f0c81
4 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dev/App.vue
View File

@@ -13,10 +13,12 @@
default-tree-node-name="new node"
default-leaf-node-name="new leaf"
v-bind:default-expanded="false">
<span class="icon" slot="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
<span class="icon" slot="addTreeNodeIcon">📂</span>
<span class="icon" slot="addLeafNodeIcon">＋</span>
<span class="icon" slot="editNodeIcon">📃</span>
<span class="icon" slot="delNodeIcon">✂️</span>
<span class="icon" slot="leafNodeIcon">🍃</span>
<span class="icon" slot="treeNodeIcon">🌲</span>
</vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>

4
package.json
View File

@@ -42,6 +42,7 @@
"chai": "^3.5.0",
"cross-env": "^5.0.1",
"css-loader": "^0.26.2",
"cz-conventional-changelog": "^2.1.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.8.1",
"husky": "^1.2.0",
@@ -61,8 +62,5 @@
"webpack": "^1.13.2",
"webpack-dev-server": "1.14.0",
"webpack-merge": "^0.14.1"
},
"dependencies": {
"cz-conventional-changelog": "^2.1.0"
}
}

22
readme.md
View File

@@ -21,10 +21,12 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
default-tree-node-name="new node"
default-leaf-node-name="new leaf"
v-bind:default-expanded="false">
<span class="icon" slot="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
<span class="icon" slot="addTreeNodeIcon">📂</span>
<span class="icon" slot="addLeafNodeIcon">＋</span>
<span class="icon" slot="editNodeIcon">📃</span>
<span class="icon" slot="delNodeIcon">✂️</span>
<span class="icon" slot="leafNodeIcon">🍃</span>
<span class="icon" slot="treeNodeIcon">🌲</span>
</vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
@@ -195,11 +197,13 @@ drop-before | {node, src, target} | Trigger after dropping a node before another
drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after
# customize operation icons
The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them:
```html
<span class="icon" slot="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
<span class="icon" slot="addTreeNodeIcon">📂</span>
<span class="icon" slot="addLeafNodeIcon">＋</span>
<span class="icon" slot="editNodeIcon">📃</span>
<span class="icon" slot="delNodeIcon">✂️</span>
<span class="icon" slot="leafNodeIcon">🍃</span>
<span class="icon" slot="treeNodeIcon">🌲</span>
```

16
src/VueTreeList.vue
View File

@@ -38,22 +38,22 @@
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
<div class="vtl-operation" v-show="isHover">
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
<slot name="addTreeNode">
<slot name="addTreeNodeIcon">
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
</slot>
</span>
<span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
<slot name="addLeafNode">
<slot name="addLeafNodeIcon">
<i class="vtl-icon vtl-icon-plus"></i>
</slot>
</span>
<span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
<slot name="editNode">
<slot name="editNodeIcon">
<i class="vtl-icon vtl-icon-edit"></i>
</slot>
</span>
<span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
<slot name="delNode">
<slot name="delNodeIcon">
<i class="vtl-icon vtl-icon-trash"></i>
</slot>
</span>
@@ -76,10 +76,10 @@
v-bind:default-expanded="defaultExpanded"
:model="model"
:key='model.id'>
<slot name="addTreeNode" slot="addTreeNode" />
<slot name="addLeafNode" slot="addLeafNode" />
<slot name="editNode" slot="editNode" />
<slot name="delNode" slot="delNode" />
<slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
<slot name="addLeafNodeIcon" slot="addLeafNodeIcon" />
<slot name="editNodeIcon" slot="editNodeIcon" />
<slot name="delNodeIcon" slot="delNodeIcon" />
<slot name="leafNodeIcon" slot="leafNodeIcon" />
<slot name="treeNodeIcon" slot="treeNodeIcon" />
</item>