Skip to content

Commit 26b2b50

Browse files
angrytoroangrytoro
authored
样式更改为节点元素新增状态class (#76)
* 删除vTree的usePadding属性，使用 padding 代替 margin 来展示子节点缩进删除TreeNode.vue多返回的titleField. * 展开icon的class转移到父节点 * 新增节点选中的样式class * 升级@vue/test-utils到稳定版 * 修复节点状态在indeterminate时候，再次点击会导致子节点全部取消选择的问题
1 parent 2e0027e commit 26b2b50

File tree

12 files changed

+2556
-1799
lines changed

12 files changed

+2556
-1799
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@
33
The format is based on [Keep a Changelog](https://keepachangelog.com/zh-CN/0.3.0/),
44
and this project adheres to [Semantic Versioning](https://semver.org/lang/zh-CN/).
55

6-
## [Unreleased]
6+
## [3.2.0]
7+
### Added
8+
1. 新增节点选中的样式class
9+
10+
### Changed
11+
1. 展开icon的class转移到父节点
12+
### Deprecated
13+
1. 删除vTree的usePadding属性，使用 padding 代替 margin 来展示子节点缩进
14+
715

816
## [2.3.0] - 2020-04-15
917

‎examples/App.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import DropDataChange from './DropDataChange.vue'
2828
import Feature from './Feature.vue'
2929
import Performance from './Performance.vue'
3030
import InsertRenderTree from './InsertRenderTree.vue'
31+
import Mobile from './Mobile.vue'
3132
3233
export default defineComponent({
3334
components: {
@@ -39,7 +40,8 @@ export default defineComponent({
3940
// DropDataChange,
4041
Feature,
4142
Performance,
42-
InsertRenderTree
43+
InsertRenderTree,
44+
Mobile
4345
},
4446
setup(props) {
4547
const components = {
@@ -53,7 +55,8 @@ export default defineComponent({
5355
// DropRemote,
5456
Drag,
5557
// DropDataChange,
56-
InsertRenderTree
58+
InsertRenderTree,
59+
Mobile
5760
}
5861
const tabList = reactive(Object.keys(components)) as any[]
5962
const currentTab = ref(tabList[0])
@@ -70,6 +73,7 @@ export default defineComponent({
7073
height: 90px;
7174
padding: 10px 50px;
7275
border-bottom: 1px solid lightgray;
76+
overflow: auto;
7377
7478
button {
7579
cursor: pointer;

‎examples/Mobile.vue‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template>
2+
<div class="container">
3+
<!-- 单选 -->
4+
<div class="panel">
5+
<div class="header">单选修改背景</div>
6+
<div class="body">
7+
<div style="height: 300px">
8+
<VTree
9+
v-model="selectableValue"
10+
:data="selectable"
11+
@update:modelValue="() => {}"
12+
selectable
13+
></VTree>
14+
</div>
15+
</div>
16+
</div>
17+
<!-- 多选 -->
18+
<div class="panel">
19+
<div class="header">多选，父节点不能选择</div>
20+
<div class="body">
21+
<div class="interface">
22+
<div style="height: 300px">
23+
<VTree
24+
v-if="showCheckable"
25+
v-model="checkableValue"
26+
:data="checkable"
27+
checkable
28+
ignore-mode="parents"
29+
:cascade="false"
30+
></VTree>
31+
</div>
32+
</div>
33+
<div class="desc">
34+
<div class="desc-block">
35+
<p>多选，父节点不能选择</p>
36+
v-model: <br />
37+
{{ checkableValue }}
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</template>
44+
45+
<script lang="ts" setup>
46+
import VTree, { TreeNode } from '../src'
47+
import { IgnoreType } from '../src/types'
48+
import treeDataGenerator from '../tests/tree-data-generator'
49+
import { defineComponent, ref, nextTick } from 'vue-demi'
50+
51+
const genData = (extra = {}) => {
52+
return treeDataGenerator(
53+
Object.assign(
54+
{
55+
treeDepth: 3,
56+
nodesPerLevel: 5,
57+
sameIdTitle: true
58+
},
59+
extra
60+
)
61+
)
62+
}
63+
64+
const selectableData = genData().data
65+
const selectableValue = ref('')
66+
const selectable = ref(selectableData)
67+
const showCheckable = ref(true)
68+
const checkableData = genData().data
69+
checkableData[0].expand = true
70+
checkableData[1].children![0].disabled = true
71+
const checkableValue = ref<(string | number)[]>([checkableData[0].id!])
72+
const checkable = ref(checkableData)
73+
const checkableIgnoreMode = ref<IgnoreType>('none')
74+
const checkableCascade = ref(true)
75+
function onIgnoreBtnClick(mode: IgnoreType) {
76+
checkableIgnoreMode.value = mode
77+
showCheckable.value = false
78+
nextTick(() => {
79+
checkableValue.value = []
80+
showCheckable.value = true
81+
})
82+
}
83+
function onCascadeBtnClick(mode: boolean) {
84+
checkableCascade.value = mode
85+
showCheckable.value = false
86+
nextTick(() => {
87+
checkableValue.value = []
88+
showCheckable.value = true
89+
})
90+
}
91+
function onResetBtnClick() {
92+
showCheckable.value = false
93+
nextTick(() => {
94+
checkableIgnoreMode.value = 'none'
95+
checkableCascade.value = true
96+
checkableValue.value = []
97+
showCheckable.value = true
98+
})
99+
}
100+
101+
</script>
102+
103+
<style lang="less" scoped>
104+
105+
:deep(.ctree-tree-node_selected) {
106+
background-color: #eef5ff;
107+
border-radius: 4px;
108+
.ctree-tree-node__title {
109+
background: none;
110+
}
111+
}
112+
:deep(.ctree-tree-node__wrapper.ctree-tree-node__wrapper_is-leaf.ctree-tree-node_checked) {
113+
background-color: #eef5ff;
114+
border-radius: 4px;
115+
}
116+
:deep(.ctree-tree-node__checkbox_wrapper) {
117+
display: none;
118+
}
119+
:deep(.ctree-tree-node__wrapper_is-leaf) {
120+
.ctree-tree-node__checkbox_wrapper {
121+
display: flex;
122+
}
123+
}
124+
.container {
125+
width: 100%;
126+
height: 100%;
127+
padding: 10px;
128+
box-sizing: border-box;
129+
130+
.panel {
131+
width: 100%;
132+
margin-bottom: 10px;
133+
border: 1px solid lightgray;
134+
border-radius: 5px;
135+
136+
.header {
137+
height: 30px;
138+
border-bottom: 1px solid lightgray;
139+
padding: 10px 30px;
140+
}
141+
142+
.body {
143+
display: flex;
144+
145+
.interface {
146+
flex: 1;
147+
padding: 10px 30px;
148+
border-right: 1px solid lightgray;
149+
}
150+
151+
.desc {
152+
flex: 1;
153+
padding: 10px 30px;
154+
155+
.desc-block {
156+
padding: 5px 0;
157+
margin-bottom: 10px;
158+
border-bottom: 1px solid lightgray;
159+
160+
&:last-child {
161+
border-bottom: none;
162+
}
163+
}
164+
}
165+
}
166+
}
167+
}
168+
</style>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wsfe/vue-tree",
3-
"version": "3.1.0",
3+
"version": "3.2.0",
44
"types": "./types",
55
"description": "A vue tree component using virtual list.",
66
"main": "./dist/v3/vue-tree.umd.js",
@@ -68,7 +68,7 @@
6868
"@types/jest": "26.0.14",
6969
"@vitejs/plugin-vue": "^4.0.0",
7070
"@vue/babel-preset-app": "^5.0.8",
71-
"@vue/test-utils": "2.0.0-rc.18",
71+
"@vue/test-utils": "^2.4.1",
7272
"autoprefixer": "^10.4.13",
7373
"babel-jest": "^26.6.3",
7474
"jest": "26.6.3",

0 commit comments

Comments
 (0)