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 2582880

Browse files
feat: add dashDensity in showLine
1 parent 549e4fd commit 2582880

File tree

10 files changed

+122
-84
lines changed

10 files changed

+122
-84
lines changed

‎examples/Feature.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
<div style="height: 300px">
148148
<VTree
149149
:data="showLineTreeData"
150-
:showLine="{ type: showLineType, polyline: showLinePolyline }"
150+
:showLine="{ type: showLineType, polyline: showLinePolyline, dashDensity }"
151151
defaultExpandAll
152152
animation
153153
/>
@@ -169,6 +169,9 @@
169169
{{ showLineType }}
170170
</button>
171171
<p>当前连接线类型:{{showLineType}}</p>
172+
<p v-if="showLineType === 'dashed'">
173+
虚线密度:<input type="range" v-model.number="dashDensity" :min="1" :max="10" :step="1" /> {{ dashDensity }}
174+
</p>
172175
</div>
173176
<div class="desc-block">
174177
showLine.polyline:
@@ -437,6 +440,8 @@ export default defineComponent({
437440
showLineType.value = type
438441
}
439442
443+
const dashDensity = ref(3)
444+
440445
const showLinePolyline = ref(false)
441446
const onShowLinePolylineBtnClick = (polyline: boolean) => {
442447
showLinePolyline.value = polyline
@@ -485,6 +490,7 @@ export default defineComponent({
485490
onShowLineTypeBtnClick,
486491
showLinePolyline,
487492
onShowLinePolylineBtnClick,
493+
dashDensity,
488494
489495
// 自定义节点
490496
nodeSlotDescText,

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wsfe/vue-tree",
3-
"version": "4.0.1",
3+
"version": "4.1.0",
44
"types": "./types",
55
"description": "A vue tree component using virtual list.",
66
"main": "./dist/vue-tree.umd.js",

‎site/.vitepress/code/NodeCreationAndRemoval.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<VTree ref="tree" :data="data">
33
<template #node="{ node }">
4-
<span>{{ node.title }}</span>
4+
{{ node.title }}
55
<button @click="handleAdd(node)">Add sibling</button>
66
<button @click="handleAppend(node)">Append child</button>
77
<button @click="handleRemove(node)">Remove</button>

‎site/.vitepress/code/SelectableAndCheckable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<VTree v-model="checked" :data="data" selectable checkable />
3-
<div>v-model: {{ checked }}</div>
3+
<div>v&dash;model: {{ checked }}</div>
44
</template>
55

66
<script setup lang="ts">

‎site/.vitepress/code/ShowLine.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@
1919
<input type="radio" id="showline-polyline-false" :value="false" v-model="polyline" />
2020
<label for="showline-polyline-false">false</label>
2121
</div>
22+
23+
<div v-if="type === 'dashed'">
24+
<span>showLine.dashDensity: </span>
25+
<input type="range" :min="1" :max="10" :step="1" v-model.number="dashDensity" />
26+
<span>{{ dashDensity }}</span>
27+
</div>
2228
</div>
2329
<VTree :data="data" :showLine="showLine" animation defaultExpandAll />
2430
</template>
@@ -29,11 +35,13 @@ import VTree from '@wsfe/vue-tree'
2935
3036
const type = ref('solid')
3137
const polyline = ref(false)
38+
const dashDensity = ref(3)
3239
3340
const showLine = computed(() => {
3441
return {
3542
type: type.value,
3643
polyline: polyline.value,
44+
dashDensity: dashDensity.value,
3745
}
3846
})
3947

‎site/.vitepress/config.mts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import path from 'node:path'
12
import { defineConfig } from 'vitepress'
23
import zh from './zh.mjs'
34
import en from './en.mjs'
@@ -31,6 +32,14 @@ export default defineConfig({
3132
{ icon: 'github', link: 'https://github.com/wsfe/vue-tree' }
3233
]
3334
},
35+
vite: {
36+
resolve: {
37+
alias: {
38+
'@wsfe/vue-tree/style.css': path.resolve('src/styles/index.less'),
39+
'@wsfe/vue-tree': path.resolve('src'),
40+
},
41+
},
42+
},
3443

3544
locales: {
3645
root: {

‎site/api/vtree.md

Lines changed: 37 additions & 37 deletions
Large diffs are not rendered by default.

‎site/en/api/vtree.md

Lines changed: 37 additions & 37 deletions
Large diffs are not rendered by default.

‎src/components/TreeNode.vue

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
width: `${nodeIndent}px`,
1111
}"
1212
>
13-
<polyline
13+
<path
1414
fill="none"
15-
:points="polylinePoints(index === data._level - 1)"
15+
:d="polylinePoints(index === data._level - 1)"
1616
:stroke-width="strokeWidth"
1717
:stroke="showLineParams.color"
1818
:stroke-dasharray="strokeDasharray"
@@ -114,14 +114,21 @@ const showLineParams = computed(() => {
114114
type: showLineType.solid,
115115
color: '#D3D3D3',
116116
polyline: false,
117+
dashDensity: 3,
117118
}
118119
let params: Required<ShowLine> = defaultParams
119120
if (typeof props.showLine === 'object') {
121+
let dashDensity = defaultParams.dashDensity
122+
if (typeof props.showLine.dashDensity === 'number' && props.showLine.dashDensity >= 1 && props.showLine.dashDensity <= 10) {
123+
dashDensity = props.showLine.dashDensity
124+
}
125+
120126
params = {
121127
width: props.showLine.width ?? defaultParams.width,
122128
type: props.showLine.type ?? defaultParams.type,
123129
color: props.showLine.color ?? defaultParams.color,
124130
polyline: props.showLine.polyline ?? defaultParams.polyline,
131+
dashDensity,
125132
}
126133
}
127134
return params
@@ -132,18 +139,18 @@ const strokeWidth = computed(() => showLineParams.value.width * 100 / props.node
132139
const strokeDasharray = computed(() => {
133140
switch (showLineParams.value.type) {
134141
case showLineType.dashed:
135-
return '25'
142+
return 100/ (showLineParams.value.dashDensity*2)
136143
default:
137144
break
138145
}
139146
return 'none'
140147
})
141148
142149
const polylinePoints = (isDirectParentLine: boolean) => {
143-
if (!showLineParams.value.polyline || !isDirectParentLine) return '50,0 50,100'
150+
if (!showLineParams.value.polyline || !isDirectParentLine) return 'M50,0 L50,100'
144151
const parent = props.getNode(props.data[props.keyField])?._parent
145-
if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return '50,0 50,50 100,50 50,50'
146-
return '50,0 50,50 100,50 50,50 50,100'
152+
if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return 'M50,0 L50,50 M100,50 L50,50'
153+
return 'M50,0 L50,100 M100,50 L50,50'
147154
}
148155
149156
const {

‎src/types/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,18 @@ export interface INonReactiveData {
3131
blockNodes: TreeNode[]
3232
}
3333

34+
// Utils to generate types like 1 | 2 | 3
35+
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
36+
? Acc[number]
37+
: Enumerate<N, [...Acc, Acc['length']]>
38+
39+
type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>
40+
3441
export interface ShowLine {
3542
/** 连接线宽度,svg stroke-width, 默认 1px */
3643
width?: number
3744
type?: showLineType
3845
color?: string
3946
polyline?: boolean
47+
dashDensity?: IntRange<1, 11>
4048
}

0 commit comments

Comments
(0)

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