sard-uniapp 1.25.8 → 1.25.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/components/collapse/README.md +5 -3
- package/components/collapse/collapse.vue +12 -2
- package/components/collapse/common.d.ts +2 -0
- package/components/tree/README.md +22 -21
- package/components/tree/common.d.ts +42 -0
- package/components/tree/tree.d.ts +1 -0
- package/components/tree/tree.vue +12 -4
- package/components/tree-node/index.scss +23 -8
- package/components/tree-node/tree-node.vue +28 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [1.25.9](https://github.com/sutras/sard-uniapp/compare/v1.25.8...v1.25.9) (2026-01-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **tree:** 修复文字过长产生的错位问题, 新增 auto-height 属性 ([5cb9535](https://github.com/sutras/sard-uniapp/commit/5cb953517c631ebcd9431190d3f5cc60c27d7e86))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
1
10
|
## [1.25.8](https://github.com/sutras/sard-uniapp/compare/v1.25.7...v1.25.8) (2026-01-03)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -28,9 +28,11 @@ import Collapse from 'sard-uniapp/components/collapse/collapse.vue'
|
|
|
28
28
|
|
|
29
29
|
### CollapseProps
|
|
30
30
|
|
|
31
|
-
| 属性
|
|
32
|
-
|
|
|
33
|
-
| visible
|
|
31
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
32
|
+
| ----------------------------------- | ---------------------- | ------- | ------ |
|
|
33
|
+
| visible | 是否可见 | boolean | false |
|
|
34
|
+
| lazy <sup>1.25.9+</sup> | 是否延迟渲染折叠内容 | boolean | false |
|
|
35
|
+
| destroy-on-close <sup>1.25.9+</sup> | 关闭时是否销毁折叠内容 | boolean | false |
|
|
34
36
|
|
|
35
37
|
### CollapseSlots
|
|
36
38
|
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
@transitionend="onTransitionEnd"
|
|
6
6
|
>
|
|
7
7
|
<view
|
|
8
|
+
v-if="rendered"
|
|
8
9
|
:class="classNames(bem.e('content'), contentClass)"
|
|
9
10
|
:style="stringifyStyle(contentStyle)"
|
|
10
11
|
:id="contentId"
|
|
@@ -26,6 +27,8 @@ import {
|
|
|
26
27
|
} from "../../utils";
|
|
27
28
|
/**
|
|
28
29
|
* @property {boolean} visible 是否可见，默认值：false。
|
|
30
|
+
* @property {boolean} lazy 是否延迟渲染折叠内容，默认值：false。
|
|
31
|
+
* @property {boolean} destroyOnClose 关闭时是否销毁折叠内容，默认值：false。
|
|
29
32
|
*/
|
|
30
33
|
export default _defineComponent({
|
|
31
34
|
...{
|
|
@@ -40,7 +43,9 @@ export default _defineComponent({
|
|
|
40
43
|
rootClass: { type: String, required: false },
|
|
41
44
|
contentClass: { type: String, required: false },
|
|
42
45
|
contentStyle: { type: String, required: false },
|
|
43
|
-
visible: { type: Boolean, required: false }
|
|
46
|
+
visible: { type: Boolean, required: false },
|
|
47
|
+
lazy: { type: Boolean, required: false },
|
|
48
|
+
destroyOnClose: { type: Boolean, required: false }
|
|
44
49
|
},
|
|
45
50
|
setup(__props, { expose: __expose }) {
|
|
46
51
|
__expose();
|
|
@@ -52,8 +57,10 @@ export default _defineComponent({
|
|
|
52
57
|
return (await getBoundingClientRect(`#${contentId}`, instance)).height;
|
|
53
58
|
};
|
|
54
59
|
const collapseHeight = ref(props.visible ? "auto" : "0px");
|
|
60
|
+
const rendered = ref(!props.lazy || props.visible);
|
|
55
61
|
const open = () => {
|
|
56
62
|
collapseHeight.value = "0px";
|
|
63
|
+
rendered.value = true;
|
|
57
64
|
setTimeout(async () => {
|
|
58
65
|
const height = await getHeight();
|
|
59
66
|
collapseHeight.value = height + "px";
|
|
@@ -70,6 +77,9 @@ export default _defineComponent({
|
|
|
70
77
|
if (collapseHeight.value !== "0px") {
|
|
71
78
|
collapseHeight.value = "auto";
|
|
72
79
|
}
|
|
80
|
+
if (!props.visible && props.destroyOnClose) {
|
|
81
|
+
rendered.value = false;
|
|
82
|
+
}
|
|
73
83
|
};
|
|
74
84
|
watch(
|
|
75
85
|
() => props.visible,
|
|
@@ -93,7 +103,7 @@ export default _defineComponent({
|
|
|
93
103
|
props.rootStyle
|
|
94
104
|
);
|
|
95
105
|
});
|
|
96
|
-
const __returned__ = { props, bem, instance, contentId, getHeight, collapseHeight, open, close, onTransitionEnd, collapseClass, collapseStyle, get classNames() {
|
|
106
|
+
const __returned__ = { props, bem, instance, contentId, getHeight, collapseHeight, rendered, open, close, onTransitionEnd, collapseClass, collapseStyle, get classNames() {
|
|
97
107
|
return classNames;
|
|
98
108
|
}, get stringifyStyle() {
|
|
99
109
|
return stringifyStyle;
|
|
@@ -103,27 +103,28 @@ import Tree from 'sard-uniapp/components/tree/tree.vue'
|
|
|
103
103
|
|
|
104
104
|
### TreeProps
|
|
105
105
|
|
|
106
|
-
| 属性 | 描述
|
|
107
|
-
| ---------------------------------- |
|
|
108
|
-
| root-class | 组件根元素类名
|
|
109
|
-
| root-style | 组件根元素样式
|
|
110
|
-
| data | 树形数据
|
|
111
|
-
| node-keys | 节点对象的键名
|
|
112
|
-
| default-expand-all | 是否默认展开所有节点
|
|
113
|
-
| default-expanded-keys | 默认展开的节点的 key
|
|
114
|
-
| accordion | 是否每次只展示一个同级树节点
|
|
115
|
-
| selectable | 节点是否可被选择（复选）
|
|
116
|
-
| check-strictly | 可选时是否严格遵循父子不关联的做法（复选）
|
|
117
|
-
| default-checked-keys | 默认勾选的节点的 key 的数组（复选）
|
|
118
|
-
| single-selectable <sup>1.17+</sup> | 节点是否可被选择（单选）
|
|
119
|
-
| leaf-only <sup>1.17+</sup> | 是否只能选择叶子节点（单选）
|
|
120
|
-
| current (v-model) <sup>1.17+</sup> | 当前选择的节点的 key（单选）
|
|
121
|
-
| draggable | 是否可以拖拽节点
|
|
122
|
-
| editable | 是否可编辑节点（增删改）
|
|
123
|
-
| filter-mode | 节点过滤模式
|
|
124
|
-
| filter-method | 自定义过滤方法
|
|
125
|
-
| lazy <sup>1.24.7+</sup> | 是否懒加载子节点，需与 load 方法结合使用
|
|
126
|
-
| load <sup>1.24.7+</sup> | 加载子树数据的方法，仅当 lazy 属性为true 时生效
|
|
106
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
107
|
+
| ---------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------- | --------------- |
|
|
108
|
+
| root-class | 组件根元素类名 | string | - |
|
|
109
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
110
|
+
| data | 树形数据 | TreeNode[] | - |
|
|
111
|
+
| node-keys | 节点对象的键名 | TreeNodeKeys | defaultNodeKeys |
|
|
112
|
+
| default-expand-all | 是否默认展开所有节点 | boolean | false |
|
|
113
|
+
| default-expanded-keys | 默认展开的节点的 key | (string \| number)[] | - |
|
|
114
|
+
| accordion | 是否每次只展示一个同级树节点 | boolean | false |
|
|
115
|
+
| selectable | 节点是否可被选择（复选） | boolean | false |
|
|
116
|
+
| check-strictly | 可选时是否严格遵循父子不关联的做法（复选） | boolean | false |
|
|
117
|
+
| default-checked-keys | 默认勾选的节点的 key 的数组（复选） | (string \| number)[] | - |
|
|
118
|
+
| single-selectable <sup>1.17+</sup> | 节点是否可被选择（单选） | boolean | false |
|
|
119
|
+
| leaf-only <sup>1.17+</sup> | 是否只能选择叶子节点（单选） | boolean | false |
|
|
120
|
+
| current (v-model) <sup>1.17+</sup> | 当前选择的节点的 key（单选） | string \| number | - |
|
|
121
|
+
| draggable | 是否可以拖拽节点 | boolean | false |
|
|
122
|
+
| editable | 是否可编辑节点（增删改） | boolean | false |
|
|
123
|
+
| filter-mode | 节点过滤模式 | 'lenient' \| 'strict' | 'lenient' |
|
|
124
|
+
| filter-method | 自定义过滤方法 | (value: string, node: TreeStateNode) => boolean | - |
|
|
125
|
+
| lazy <sup>1.24.7+</sup> | 是否懒加载子节点，需与 load 方法结合使用 | boolean | false |
|
|
126
|
+
| load <sup>1.24.7+</sup> | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | (node?: TreeStateNode) => Promise<TreeNode[]> \| TreeNode[] | - |
|
|
127
|
+
| auto-height <sup>1.25.9+</sup> | 默认只可展示一行文字，设置此属性可让节点高度跟随内容变化，只可用在非拖拽模式 | boolean | false |
|
|
127
128
|
|
|
128
129
|
### TreeEmits
|
|
129
130
|
|
|
@@ -61,6 +61,7 @@ export interface TreeProps {
|
|
|
61
61
|
filterMethod?: (value: string, node: TreeStateNode) => boolean;
|
|
62
62
|
lazy?: boolean;
|
|
63
63
|
load?: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
64
|
+
autoHeight?: boolean;
|
|
64
65
|
}
|
|
65
66
|
export declare const defaultTreeProps: () => {
|
|
66
67
|
data: () => never[];
|
|
@@ -84,6 +85,7 @@ export declare const defaultTreeProps: () => {
|
|
|
84
85
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
85
86
|
lazy: boolean;
|
|
86
87
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
88
|
+
autoHeight: boolean;
|
|
87
89
|
}) => string | false | import("vue").CSSProperties | StyleValue[]) | null) | undefined;
|
|
88
90
|
rootClass?: (string | ((props: {
|
|
89
91
|
rootStyle: StyleValue;
|
|
@@ -105,6 +107,7 @@ export declare const defaultTreeProps: () => {
|
|
|
105
107
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
106
108
|
lazy: boolean;
|
|
107
109
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
110
|
+
autoHeight: boolean;
|
|
108
111
|
}) => string)) | undefined;
|
|
109
112
|
nodeKeys?: ((props: {
|
|
110
113
|
rootStyle: StyleValue;
|
|
@@ -126,6 +129,7 @@ export declare const defaultTreeProps: () => {
|
|
|
126
129
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
127
130
|
lazy: boolean;
|
|
128
131
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
132
|
+
autoHeight: boolean;
|
|
129
133
|
}) => TreeNodeKeys) | undefined;
|
|
130
134
|
defaultExpandAll?: (boolean | ((props: {
|
|
131
135
|
rootStyle: StyleValue;
|
|
@@ -147,6 +151,7 @@ export declare const defaultTreeProps: () => {
|
|
|
147
151
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
148
152
|
lazy: boolean;
|
|
149
153
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
154
|
+
autoHeight: boolean;
|
|
150
155
|
}) => boolean)) | undefined;
|
|
151
156
|
defaultExpandedKeys?: ((props: {
|
|
152
157
|
rootStyle: StyleValue;
|
|
@@ -168,6 +173,7 @@ export declare const defaultTreeProps: () => {
|
|
|
168
173
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
169
174
|
lazy: boolean;
|
|
170
175
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
176
|
+
autoHeight: boolean;
|
|
171
177
|
}) => (string | number)[]) | undefined;
|
|
172
178
|
accordion?: (boolean | ((props: {
|
|
173
179
|
rootStyle: StyleValue;
|
|
@@ -189,6 +195,7 @@ export declare const defaultTreeProps: () => {
|
|
|
189
195
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
190
196
|
lazy: boolean;
|
|
191
197
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
198
|
+
autoHeight: boolean;
|
|
192
199
|
}) => boolean)) | undefined;
|
|
193
200
|
selectable?: (boolean | ((props: {
|
|
194
201
|
rootStyle: StyleValue;
|
|
@@ -210,6 +217,7 @@ export declare const defaultTreeProps: () => {
|
|
|
210
217
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
211
218
|
lazy: boolean;
|
|
212
219
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
220
|
+
autoHeight: boolean;
|
|
213
221
|
}) => boolean)) | undefined;
|
|
214
222
|
checkStrictly?: (boolean | ((props: {
|
|
215
223
|
rootStyle: StyleValue;
|
|
@@ -231,6 +239,7 @@ export declare const defaultTreeProps: () => {
|
|
|
231
239
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
232
240
|
lazy: boolean;
|
|
233
241
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
242
|
+
autoHeight: boolean;
|
|
234
243
|
}) => boolean)) | undefined;
|
|
235
244
|
singleSelectable?: (boolean | ((props: {
|
|
236
245
|
rootStyle: StyleValue;
|
|
@@ -252,6 +261,7 @@ export declare const defaultTreeProps: () => {
|
|
|
252
261
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
253
262
|
lazy: boolean;
|
|
254
263
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
264
|
+
autoHeight: boolean;
|
|
255
265
|
}) => boolean)) | undefined;
|
|
256
266
|
leafOnly?: (boolean | ((props: {
|
|
257
267
|
rootStyle: StyleValue;
|
|
@@ -273,6 +283,7 @@ export declare const defaultTreeProps: () => {
|
|
|
273
283
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
274
284
|
lazy: boolean;
|
|
275
285
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
286
|
+
autoHeight: boolean;
|
|
276
287
|
}) => boolean)) | undefined;
|
|
277
288
|
current?: (string | number | ((props: {
|
|
278
289
|
rootStyle: StyleValue;
|
|
@@ -294,6 +305,7 @@ export declare const defaultTreeProps: () => {
|
|
|
294
305
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
295
306
|
lazy: boolean;
|
|
296
307
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
308
|
+
autoHeight: boolean;
|
|
297
309
|
}) => string | number)) | undefined;
|
|
298
310
|
defaultCheckedKeys?: ((props: {
|
|
299
311
|
rootStyle: StyleValue;
|
|
@@ -315,6 +327,7 @@ export declare const defaultTreeProps: () => {
|
|
|
315
327
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
316
328
|
lazy: boolean;
|
|
317
329
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
330
|
+
autoHeight: boolean;
|
|
318
331
|
}) => (string | number)[]) | undefined;
|
|
319
332
|
draggable?: (boolean | ((props: {
|
|
320
333
|
rootStyle: StyleValue;
|
|
@@ -336,6 +349,7 @@ export declare const defaultTreeProps: () => {
|
|
|
336
349
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
337
350
|
lazy: boolean;
|
|
338
351
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
352
|
+
autoHeight: boolean;
|
|
339
353
|
}) => boolean)) | undefined;
|
|
340
354
|
editable?: (boolean | ((props: {
|
|
341
355
|
rootStyle: StyleValue;
|
|
@@ -357,6 +371,7 @@ export declare const defaultTreeProps: () => {
|
|
|
357
371
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
358
372
|
lazy: boolean;
|
|
359
373
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
374
|
+
autoHeight: boolean;
|
|
360
375
|
}) => boolean)) | undefined;
|
|
361
376
|
filterMode?: ("lenient" | "strict" | ((props: {
|
|
362
377
|
rootStyle: StyleValue;
|
|
@@ -378,6 +393,7 @@ export declare const defaultTreeProps: () => {
|
|
|
378
393
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
379
394
|
lazy: boolean;
|
|
380
395
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
396
|
+
autoHeight: boolean;
|
|
381
397
|
}) => "lenient" | "strict")) | undefined;
|
|
382
398
|
filterMethod?: (((value: string, node: TreeStateNode) => boolean) | ((props: {
|
|
383
399
|
rootStyle: StyleValue;
|
|
@@ -399,6 +415,7 @@ export declare const defaultTreeProps: () => {
|
|
|
399
415
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
400
416
|
lazy: boolean;
|
|
401
417
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
418
|
+
autoHeight: boolean;
|
|
402
419
|
}) => (value: string, node: TreeStateNode) => boolean)) | undefined;
|
|
403
420
|
lazy?: (boolean | ((props: {
|
|
404
421
|
rootStyle: StyleValue;
|
|
@@ -420,6 +437,7 @@ export declare const defaultTreeProps: () => {
|
|
|
420
437
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
421
438
|
lazy: boolean;
|
|
422
439
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
440
|
+
autoHeight: boolean;
|
|
423
441
|
}) => boolean)) | undefined;
|
|
424
442
|
load?: (((node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[]) | ((props: {
|
|
425
443
|
rootStyle: StyleValue;
|
|
@@ -441,7 +459,30 @@ export declare const defaultTreeProps: () => {
|
|
|
441
459
|
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
442
460
|
lazy: boolean;
|
|
443
461
|
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
462
|
+
autoHeight: boolean;
|
|
444
463
|
}) => (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[])) | undefined;
|
|
464
|
+
autoHeight?: (boolean | ((props: {
|
|
465
|
+
rootStyle: StyleValue;
|
|
466
|
+
rootClass: string;
|
|
467
|
+
data: TreeNode[];
|
|
468
|
+
nodeKeys: TreeNodeKeys;
|
|
469
|
+
defaultExpandAll: boolean;
|
|
470
|
+
defaultExpandedKeys: (string | number)[];
|
|
471
|
+
accordion: boolean;
|
|
472
|
+
selectable: boolean;
|
|
473
|
+
checkStrictly: boolean;
|
|
474
|
+
singleSelectable: boolean;
|
|
475
|
+
leafOnly: boolean;
|
|
476
|
+
current: string | number;
|
|
477
|
+
defaultCheckedKeys: (string | number)[];
|
|
478
|
+
draggable: boolean;
|
|
479
|
+
editable: boolean;
|
|
480
|
+
filterMode: "lenient" | "strict";
|
|
481
|
+
filterMethod: (value: string, node: TreeStateNode) => boolean;
|
|
482
|
+
lazy: boolean;
|
|
483
|
+
load: (node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[];
|
|
484
|
+
autoHeight: boolean;
|
|
485
|
+
}) => boolean)) | undefined;
|
|
445
486
|
};
|
|
446
487
|
export interface TreeEmits {
|
|
447
488
|
(e: 'update:current', key: string | number, node: TreeStateNode): void;
|
|
@@ -478,6 +519,7 @@ export interface TreeBranchProps {
|
|
|
478
519
|
export interface TreeContext {
|
|
479
520
|
selectable: TreeProps['selectable'];
|
|
480
521
|
draggable: TreeProps['draggable'];
|
|
522
|
+
autoHeight: TreeProps['autoHeight'];
|
|
481
523
|
editable: TreeProps['editable'];
|
|
482
524
|
singleSelectable: TreeProps['singleSelectable'];
|
|
483
525
|
leafOnly: TreeProps['leafOnly'];
|
|
@@ -40,6 +40,7 @@ declare const _default: import("vue").DefineComponent<TreeProps, {
|
|
|
40
40
|
rootStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
|
|
41
41
|
rootClass: string;
|
|
42
42
|
accordion: boolean;
|
|
43
|
+
autoHeight: boolean;
|
|
43
44
|
checkStrictly: boolean;
|
|
44
45
|
draggable: boolean;
|
|
45
46
|
current: string | number;
|
package/components/tree/tree.vue
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view :class="treeClass" :style="treeStyle">
|
|
3
|
-
<view
|
|
3
|
+
<view
|
|
4
|
+
v-if="
|
|
5
|
+
lazy && !!load && (loadStatus !== 'loaded' || treeData.length === 0)
|
|
6
|
+
"
|
|
7
|
+
:class="bem.e('load-status')"
|
|
8
|
+
>
|
|
4
9
|
<sar-loading v-if="loadStatus === 'loading'" />
|
|
5
10
|
<text
|
|
6
11
|
v-else-if="loadStatus === 'error'"
|
|
@@ -96,6 +101,7 @@ import { useTranslate } from "../locale";
|
|
|
96
101
|
* @property {(value: string, node: TreeStateNode) => boolean} filterMethod 自定义过滤方法，默认值：-。
|
|
97
102
|
* @property {boolean} lazy 是否懒加载子节点，需与 load 方法结合使用，默认值：false。
|
|
98
103
|
* @property {(node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[]} load 加载子树数据的方法，仅当 lazy 属性为true 时生效，默认值：-。
|
|
104
|
+
* @property {boolean} autoHeight 默认只可展示一行文字，设置此属性可让节点高度跟随内容变化，只可用在非拖拽模式，默认值：false。
|
|
99
105
|
* @event {(key: string | number, node: TreeStateNode) => void} update 选择节点后触发（单选）
|
|
100
106
|
* @event {(key: string | number, node: TreeStateNode) => void} select 选择节点后触发（单选）
|
|
101
107
|
* @event {(event: {checked: boolean; node: TreeStateNode}) => void} check 点击树节点复选框时触发
|
|
@@ -136,7 +142,8 @@ export default _defineComponent({
|
|
|
136
142
|
filterMode: { type: String, required: false },
|
|
137
143
|
filterMethod: { type: Function, required: false },
|
|
138
144
|
lazy: { type: Boolean, required: false },
|
|
139
|
-
load: { type: Function, required: false }
|
|
145
|
+
load: { type: Function, required: false },
|
|
146
|
+
autoHeight: { type: Boolean, required: false }
|
|
140
147
|
}, defaultTreeProps()),
|
|
141
148
|
emits: ["update:current", "select", "check", "node-click"],
|
|
142
149
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
@@ -565,6 +572,7 @@ export default _defineComponent({
|
|
|
565
572
|
selectable: toRef(() => props.selectable),
|
|
566
573
|
draggable: toRef(() => props.draggable),
|
|
567
574
|
editable: toRef(() => props.editable),
|
|
575
|
+
autoHeight: toRef(() => props.autoHeight),
|
|
568
576
|
singleSelectable: toRef(() => props.singleSelectable),
|
|
569
577
|
leafOnly: toRef(() => props.leafOnly),
|
|
570
578
|
treeData: toRef(() => treeData.value),
|
|
@@ -603,9 +611,9 @@ export default _defineComponent({
|
|
|
603
611
|
});
|
|
604
612
|
const treeStyle = computed(() => {
|
|
605
613
|
return stringifyStyle(
|
|
606
|
-
{
|
|
614
|
+
props.draggable ? {
|
|
607
615
|
height: `calc(var(--sar-tree-node-height) * ${totalLevel.value})`
|
|
608
|
-
},
|
|
616
|
+
} : null,
|
|
609
617
|
props.rootStyle
|
|
610
618
|
);
|
|
611
619
|
});
|
|
@@ -3,15 +3,8 @@
|
|
|
3
3
|
@include bem(tree) {
|
|
4
4
|
@include e(node) {
|
|
5
5
|
@include universal;
|
|
6
|
-
position: absolute;
|
|
7
|
-
top: 0;
|
|
8
|
-
left: 0;
|
|
9
6
|
width: 100%;
|
|
10
|
-
height: var(--sar-tree-node-height);
|
|
11
|
-
transition:
|
|
12
|
-
transform var(--sar-tree-duration),
|
|
13
|
-
opacity var(--sar-tree-duration);
|
|
14
|
-
|
|
7
|
+
min-height: var(--sar-tree-node-height);
|
|
15
8
|
flex-direction: row;
|
|
16
9
|
align-items: center;
|
|
17
10
|
padding: var(--sar-tree-node-padding-y) var(--sar-tree-node-padding-x);
|
|
@@ -25,12 +18,28 @@
|
|
|
25
18
|
background: var(--sar-tree-node-active-bg);
|
|
26
19
|
}
|
|
27
20
|
|
|
21
|
+
@include m(draggable) {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
height: var(--sar-tree-node-height);
|
|
26
|
+
transition:
|
|
27
|
+
transform var(--sar-tree-duration),
|
|
28
|
+
opacity var(--sar-tree-duration);
|
|
29
|
+
}
|
|
30
|
+
|
|
28
31
|
@include m(dragging) {
|
|
29
32
|
z-index: 1;
|
|
30
33
|
background: var(--sar-tree-node-dragging-bg);
|
|
31
34
|
box-shadow: var(--sar-tree-node-dragging-shadow);
|
|
32
35
|
transition: none;
|
|
33
36
|
}
|
|
37
|
+
|
|
38
|
+
@include m(truncated) {
|
|
39
|
+
@include e(title) {
|
|
40
|
+
@include ellipsis;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
@include e(arrow) {
|
|
@@ -71,6 +80,12 @@
|
|
|
71
80
|
}
|
|
72
81
|
}
|
|
73
82
|
|
|
83
|
+
@include e(title) {
|
|
84
|
+
flex: 1;
|
|
85
|
+
min-width: 0;
|
|
86
|
+
line-height: var(--sar-leading-snug);
|
|
87
|
+
}
|
|
88
|
+
|
|
74
89
|
@include e(toolbar) {
|
|
75
90
|
@include universal;
|
|
76
91
|
flex-direction: row;
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
|
|
81
81
|
<template
|
|
82
82
|
v-if="
|
|
83
|
+
treeContext.draggable &&
|
|
83
84
|
!isMergedLeaf &&
|
|
84
85
|
node.expanded &&
|
|
85
86
|
node.children &&
|
|
@@ -91,6 +92,22 @@
|
|
|
91
92
|
</template>
|
|
92
93
|
</template>
|
|
93
94
|
|
|
95
|
+
<sar-collapse
|
|
96
|
+
v-if="
|
|
97
|
+
!treeContext.draggable &&
|
|
98
|
+
!isMergedLeaf &&
|
|
99
|
+
node.children &&
|
|
100
|
+
node.children.length > 0
|
|
101
|
+
"
|
|
102
|
+
lazy
|
|
103
|
+
destroy-on-close
|
|
104
|
+
:visible="node.expanded"
|
|
105
|
+
>
|
|
106
|
+
<template v-for="(node, index) of node.children" :key="node.key">
|
|
107
|
+
<sar-tree-node v-if="node.visible" :index="index" :node="node" />
|
|
108
|
+
</template>
|
|
109
|
+
</sar-collapse>
|
|
110
|
+
|
|
94
111
|
<sar-popover
|
|
95
112
|
v-if="treeContext.draggable"
|
|
96
113
|
:options="popoverOptions"
|
|
@@ -124,6 +141,7 @@ import SarCheckbox from "../checkbox/checkbox.vue";
|
|
|
124
141
|
import SarRadio from "../radio/radio.vue";
|
|
125
142
|
import SarPopover from "../popover/popover.vue";
|
|
126
143
|
import SarLoading from "../loading/loading.vue";
|
|
144
|
+
import SarCollapse from "../collapse/collapse.vue";
|
|
127
145
|
import { usePopover } from "../popover";
|
|
128
146
|
export default _defineComponent({
|
|
129
147
|
components: {
|
|
@@ -132,6 +150,7 @@ export default _defineComponent({
|
|
|
132
150
|
SarRadio,
|
|
133
151
|
SarPopover,
|
|
134
152
|
SarLoading,
|
|
153
|
+
SarCollapse,
|
|
135
154
|
},
|
|
136
155
|
...{
|
|
137
156
|
name: "SarTreeNode",
|
|
@@ -371,14 +390,20 @@ export default _defineComponent({
|
|
|
371
390
|
bem.em("node", "selectable", treeContext.selectable),
|
|
372
391
|
bem.em("node", "active", nodeActive.value),
|
|
373
392
|
bem.em("node", "current", isSingleChecked.value),
|
|
393
|
+
bem.em("node", "draggable", treeContext.draggable),
|
|
394
|
+
bem.em(
|
|
395
|
+
"node",
|
|
396
|
+
"truncated",
|
|
397
|
+
treeContext.draggable || !treeContext.autoHeight
|
|
398
|
+
),
|
|
374
399
|
nodeId
|
|
375
400
|
);
|
|
376
401
|
});
|
|
377
402
|
const nodeStyle = computed(() => {
|
|
378
|
-
return stringifyStyle({
|
|
403
|
+
return treeContext.draggable ? stringifyStyle({
|
|
379
404
|
transform: `translate3d(0,calc(var(--sar-tree-node-height) * ${props.node.level + props.node.offsetLevel} + ${dragging.value ? translateY.value : 0}px),0)`,
|
|
380
405
|
opacity: nodeOpacity.value
|
|
381
|
-
});
|
|
406
|
+
}) : "";
|
|
382
407
|
});
|
|
383
408
|
const editClass = computed(() => {
|
|
384
409
|
return classNames(bem.e("edit"));
|
|
@@ -418,7 +443,7 @@ export default _defineComponent({
|
|
|
418
443
|
return obviousNodes;
|
|
419
444
|
}, set obviousNodes(v) {
|
|
420
445
|
obviousNodes = v;
|
|
421
|
-
}, onDragStart, onDragMove, onDragEnd, onDragSimulatedClickTouchStart, onDragSimulatedClickTouchEnd, onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd, onDragTouchStart, onDragTouchMove, onDragTouchEnd, onDragMouseDown, dragId, popover, isLastNode, popoverOptions, onPopoverSelect, isMergedLeaf, onNodeClick, nodeActive, onNodeTouchStart, onNodeTouchEnd, onNodeMouseDown, canSingleSelectable, isSingleChecked, onSelectionTouchStart, onSelectionTouchEnd, onSelectionMouseDown, editId, getEditRect, onEditTouchStart, onEditTouchEnd, onEditMouseDown, nodeClass, nodeStyle, editClass, indentStyle, arrowClass, selectionClass, SarIcon, SarCheckbox, SarRadio, SarPopover, SarLoading };
|
|
446
|
+
}, onDragStart, onDragMove, onDragEnd, onDragSimulatedClickTouchStart, onDragSimulatedClickTouchEnd, onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd, onDragTouchStart, onDragTouchMove, onDragTouchEnd, onDragMouseDown, dragId, popover, isLastNode, popoverOptions, onPopoverSelect, isMergedLeaf, onNodeClick, nodeActive, onNodeTouchStart, onNodeTouchEnd, onNodeMouseDown, canSingleSelectable, isSingleChecked, onSelectionTouchStart, onSelectionTouchEnd, onSelectionMouseDown, editId, getEditRect, onEditTouchStart, onEditTouchEnd, onEditMouseDown, nodeClass, nodeStyle, editClass, indentStyle, arrowClass, selectionClass, SarIcon, SarCheckbox, SarRadio, SarPopover, SarLoading, SarCollapse };
|
|
422
447
|
return __returned__;
|
|
423
448
|
}
|
|
424
449
|
});
|