Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b39c16c

Browse files
fix: docs and slot
1 parent 54c5930 commit b39c16c

File tree

4 files changed

+42
-9
lines changed

4 files changed

+42
-9
lines changed

‎examples/src/main.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3-
import VueTree from '../../lib'
4-
import '../../lib/style/index.css'
3+
// import VueTree from '../../lib'
4+
// import '../../lib/style/index.css'
5+
import VueTree from '../../src/components/Tree/Tree.js'
6+
import '../../src/components/Tree/styles/index.less'
57
import router from './router'
68

79
Vue.component(VueTree.name, VueTree)

‎examples/src/views/custom/index.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@
44
ref="tree4"
55
:treeData="treeData"
66
showCheckbox>
7+
78
<template v-slot="{ node, treeNode }">
89
<span style="color: #f00">{{node.name}}</span>
910
<a class="link-color ml20" @click.stop="handleAddChild(treeNode)">增加</a>
1011
<a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)">删除</a>
1112
<a class="link-color ml20" @click.stop="toggleDisable(node)">{{ node.disabled ? '开启' : '禁用'}}</a>
1213
</template>
14+
<template #expandIcon="{expanded, toggleFold, node}">
15+
<div style="padding: 2px">
16+
<div @click="toggleFold(node)" v-if="expanded">+</div>
17+
<div @click="toggleFold(node)" v-else>-</div>
18+
</div>
19+
</template>
1320
</VueTree>
1421
</div>
1522
</template>
@@ -21,9 +28,13 @@ export default {
2128
name: 'Custom',
2229
data () {
2330
return {
24-
treeData
31+
treeData,
32+
count: 0
2533
}
2634
},
35+
updated () {
36+
console.log('updated')
37+
},
2738
methods: {
2839
handleAddChild(treeNode) {
2940
this.maxId += 1

‎examples/src/views/loadLazy/index.vue

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
lazy
66
immediatelyLoad
77
:load="loadMore"
8-
/>
8+
>
9+
<template #loading="{loading}">
10+
<div v-if="loading" id="circle"></div>
11+
</template>
12+
</VueTree>
913
</div>
1014
</template>
1115
<script>
@@ -33,4 +37,20 @@ export default {
3337
}
3438
}
3539
36-
</script>
40+
</script>
41+
<style>
42+
#circle{
43+
display: inline-block;
44+
margin: 20px auto;
45+
width: 10px;
46+
height: 10px;
47+
border: 2px white solid;
48+
border-left-color: #ff5500;
49+
border-right-color:#0c80fe;
50+
border-radius: 100%;
51+
animation: loading1 1s infinite linear;
52+
}
53+
@keyframes loading1{
54+
from{transform: rotate(0deg)}to{transform: rotate(360deg)}
55+
}
56+
</style>

‎src/components/Tree/TreeNodeContent.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,14 @@ export default {
7474
e.stopPropagation()
7575
},
7676
renderExpandSlot () {
77-
const { expandIcon: expandIconSlot } = this.tree
77+
const { $scopedSlots: {expandIcon: expandIconSlot} } = this.tree
7878
const { node, toggleFold, visibleExpand } = this
7979
const { expanded } = node.data
80-
return expandIconSlot ? expandIconSlot({ expanded, toggleFoldCb: toggleFold }) : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} style={{display: visibleExpand}}>▼</span>)
80+
return expandIconSlot ? <divstyle={{display: visibleExpand}}>{expandIconSlot({ expanded, node, toggleFold })}</div> : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>)
8181
},
8282
renderCheckbox () {
8383
const { node, handleClickCheckBox, selectToggle } = this
84-
const { checkbox: checkboxSlot, showCheckbox } = this.tree
84+
const { $scopedSlots: {checkbox: checkboxSlot}, showCheckbox } = this.tree
8585
const { checked, partialSelected, exceptDisabledChecked, disabled, } = node.data
8686
return showCheckbox ? checkboxSlot ? checkboxSlot({handleClickCheckBox, selectToggle, node: node.data }) : (<Checkbox
8787
value={checked}
@@ -93,7 +93,7 @@ export default {
9393
onChange={(val) => selectToggle(val, node)} />) : null
9494
},
9595
renderLoading () {
96-
const { loading: loadingSlot } = this.tree
96+
const { $scopedSlots: {loading: loadingSlot} } = this.tree
9797
const { loading } = this
9898
return loading? loadingSlot ? loadingSlot({ loading }) : (<div>↻</div>) : null
9999
},

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /