Skip to content

Commit 2fc17f2

Browse files
lycHublycHub
committed
添加回调事件，更新文档
1 parent 9eef316 commit 2fc17f2

File tree

15 files changed

+253
-184
lines changed

15 files changed

+253
-184
lines changed

‎README-CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ In components:
3535
<script lang="tsx">
3636
import {defineComponent, onMounted, ref} from 'vue';
3737
import { VirTree } from 'vue-virtual-tree';
38-
import {TreeNodeOptions} from "vue-virtual-tree/typings/VirtualTree/types";
38+
import {TreeNodeOptions} from "vue-virtual-tree/lib/typings/VirtualTree/types";
3939
4040
export default defineComponent({
4141
name: 'BaseDemo',

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Partial registration, you can get a complete type
3737
<script lang="tsx">
3838
import {defineComponent, onMounted, ref} from 'vue';
3939
import { VirTree } from 'vue-virtual-tree';
40-
import {TreeNodeOptions} from "vue-virtual-tree/typings/VirtualTree/types";
40+
import {TreeNodeOptions} from "vue-virtual-tree/lib/typings/VirtualTree/types";
4141
4242
export default defineComponent({
4343
name: 'BaseDemo',

‎lib/typings/VirtualTree/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
2424
};
2525
loadData: PropType<(node: TreeNodeOptions, callback: (children: TreeNodeOptions[]) => void) => void>;
2626
render: FunctionConstructor;
27-
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectChange" | "checkChange")[], "selectChange" | "checkChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
27+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectChange" | "toggleExpand" | "checkChange")[], "selectChange" | "toggleExpand" | "checkChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
2828
source: TreeNodeOptions[];
2929
showCheckbox: boolean;
3030
checkStrictly: boolean;

‎lib/typings/VirtualTree/node.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
1515
default: boolean;
1616
};
1717
render: FunctionConstructor;
18-
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select-change" | "toggle-expand" | "check-change")[], "select-change" | "toggle-expand" | "check-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
18+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectChange" | "toggleExpand" | "checkChange")[], "selectChange" | "toggleExpand" | "checkChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
1919
node: Required<TreeNodeOptions>;
2020
showCheckbox: boolean;
2121
checkStrictly: boolean;

‎lib/vue-virtual-tree.common.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2236,7 +2236,7 @@ module.exports = function (IteratorConstructor, NAME, next) {
22362236
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
22372237
exports = ___CSS_LOADER_API_IMPORT___(false);
22382238
// Module
2239-
exports.push([module.i, ".vir-checkbox{display:inline-block;cursor:pointer}.vir-checkbox .inner{display:inline-block;vertical-align:text-bottom;position:relative;top:0;left:0;width:16px;height:16px;direction:ltr;background-color:#fff;border:1px solid #dcdee2;border-radius:2px;border-collapse:initial}.vir-checkbox .inner:after{position:absolute;top:50%;left:50%;width:4px;height:8px;margin-left:-2px;margin-top:-5px;border:2px solid #fff;border-top:0;border-left:0;content:\" \";opacity:0;transition:all .2s ease-in-out}.vir-checkbox .content{display:inline-block}.vir-checkbox.half-checked .inner:after{top:50%;left:50%;width:10px;height:10px;background-color:#2d8cf0;border:none;margin:0;transform:translate(-50%,-50%);opacity:1;content:\" \"}.vir-checkbox.disabled{color:#c5c8ce;cursor:not-allowed}.vir-checkbox.disabled .inner{border-color:#c5c8ce;background-color:#c5c8ce}.vir-checkbox.checked .inner{border-color:#2d8cf0;background-color:#2d8cf0}.vir-checkbox.checked .inner:after{transform:rotate(45deg);opacity:1}", ""]);
2239+
exports.push([module.i, ".vir-checkbox{display:inline-block;cursor:pointer}.vir-checkbox .inner{display:inline-block;vertical-align:text-bottom;position:relative;top:0;left:0;width:16px;height:16px;direction:ltr;background-color:#fff;border:1px solid #dcdee2;border-radius:2px;border-collapse:initial}.vir-checkbox .inner:after{position:absolute;top:50%;left:50%;width:4px;height:8px;margin-left:-2px;margin-top:-5px;border:2px solid #fff;border-top:0;border-left:0;content:\" \";opacity:0;transition:all .2s ease-in-out}.vir-checkbox .content{display:inline-block}.vir-checkbox.half-checked .inner:after{top:50%;left:50%;width:10px;height:10px;background-color:#2d8cf0;border:none;margin:0;transform:translate(-50%,-50%);opacity:1;content:\" \"}.vir-checkbox.checked .inner{border-color:#2d8cf0;background-color:#2d8cf0}.vir-checkbox.checked .inner:after{transform:rotate(45deg);opacity:1}.vir-checkbox.disabled{color:#c5c8ce;cursor:not-allowed}.vir-checkbox.disabled .inner{border-color:#c5c8ce;background-color:#c5c8ce}", ""]);
22402240
// Exports
22412241
module.exports = exports;
22422242

@@ -5968,7 +5968,7 @@ var VirtualCheckbox = __webpack_require__("74c9");
59685968
},
59695969
render: Function
59705970
},
5971-
emits: ['select-change', 'toggle-expand', 'check-change'],
5971+
emits: ['selectChange', 'toggleExpand', 'checkChange'],
59725972
setup: function setup(props, _ref) {
59735973
var emit = _ref.emit,
59745974
expose = _ref.expose;
@@ -6003,16 +6003,16 @@ var VirtualCheckbox = __webpack_require__("74c9");
60036003

60046004
var handleSelect = function handleSelect() {
60056005
if (!props.node.disabled) {
6006-
emit('select-change', props.node);
6006+
emit('selectChange', props.node);
60076007
}
60086008
};
60096009

60106010
var handleExpand = function handleExpand() {
6011-
emit('toggle-expand', props.node);
6011+
emit('toggleExpand', props.node);
60126012
};
60136013

60146014
var handleCheckChange = function handleCheckChange(checked) {
6015-
emit('check-change', [checked, props.node]);
6015+
emit('checkChange', [checked, props.node]);
60166016
};
60176017

60186018
var renderArrow = function renderArrow() {
@@ -6364,7 +6364,7 @@ var VirtualTree = __webpack_require__("039a");
63646364
loadData: Function,
63656365
render: Function
63666366
},
6367-
emits: ['selectChange', 'checkChange'],
6367+
emits: ['selectChange', 'checkChange', 'toggleExpand'],
63686368
setup: function setup(props, _ref) {
63696369
var emit = _ref.emit,
63706370
slots = _ref.slots,
@@ -6394,7 +6394,10 @@ var VirtualTree = __webpack_require__("039a");
63946394

63956395
node.selected = true;
63966396
selectedKey.value = node.nodeKey;
6397-
emit('selectChange', node);
6397+
emit('selectChange', {
6398+
preSelectedNode: flatList.value[preSelectedIndex],
6399+
node: node
6400+
});
63986401
}
63996402
};
64006403

@@ -6410,7 +6413,10 @@ var VirtualTree = __webpack_require__("039a");
64106413
updateUpwards(node, flatList.value);
64116414
}
64126415

6413-
emit('checkChange', node);
6416+
emit('checkChange', {
6417+
checked: checked,
6418+
node: node
6419+
});
64146420
};
64156421

64166422
var expandNode = function expandNode(node) {
@@ -6494,6 +6500,11 @@ var VirtualTree = __webpack_require__("039a");
64946500
} else {
64956501
collapseNode(node);
64966502
}
6503+
6504+
emit('toggleExpand', {
6505+
status: node.expanded,
6506+
node: node
6507+
});
64976508
};
64986509

64996510
var nodeRefs = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])([]);

‎lib/vue-virtual-tree.umd.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2245,7 +2245,7 @@ module.exports = function (IteratorConstructor, NAME, next) {
22452245
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
22462246
exports = ___CSS_LOADER_API_IMPORT___(false);
22472247
// Module
2248-
exports.push([module.i, ".vir-checkbox{display:inline-block;cursor:pointer}.vir-checkbox .inner{display:inline-block;vertical-align:text-bottom;position:relative;top:0;left:0;width:16px;height:16px;direction:ltr;background-color:#fff;border:1px solid #dcdee2;border-radius:2px;border-collapse:initial}.vir-checkbox .inner:after{position:absolute;top:50%;left:50%;width:4px;height:8px;margin-left:-2px;margin-top:-5px;border:2px solid #fff;border-top:0;border-left:0;content:\" \";opacity:0;transition:all .2s ease-in-out}.vir-checkbox .content{display:inline-block}.vir-checkbox.half-checked .inner:after{top:50%;left:50%;width:10px;height:10px;background-color:#2d8cf0;border:none;margin:0;transform:translate(-50%,-50%);opacity:1;content:\" \"}.vir-checkbox.disabled{color:#c5c8ce;cursor:not-allowed}.vir-checkbox.disabled .inner{border-color:#c5c8ce;background-color:#c5c8ce}.vir-checkbox.checked .inner{border-color:#2d8cf0;background-color:#2d8cf0}.vir-checkbox.checked .inner:after{transform:rotate(45deg);opacity:1}", ""]);
2248+
exports.push([module.i, ".vir-checkbox{display:inline-block;cursor:pointer}.vir-checkbox .inner{display:inline-block;vertical-align:text-bottom;position:relative;top:0;left:0;width:16px;height:16px;direction:ltr;background-color:#fff;border:1px solid #dcdee2;border-radius:2px;border-collapse:initial}.vir-checkbox .inner:after{position:absolute;top:50%;left:50%;width:4px;height:8px;margin-left:-2px;margin-top:-5px;border:2px solid #fff;border-top:0;border-left:0;content:\" \";opacity:0;transition:all .2s ease-in-out}.vir-checkbox .content{display:inline-block}.vir-checkbox.half-checked .inner:after{top:50%;left:50%;width:10px;height:10px;background-color:#2d8cf0;border:none;margin:0;transform:translate(-50%,-50%);opacity:1;content:\" \"}.vir-checkbox.checked .inner{border-color:#2d8cf0;background-color:#2d8cf0}.vir-checkbox.checked .inner:after{transform:rotate(45deg);opacity:1}.vir-checkbox.disabled{color:#c5c8ce;cursor:not-allowed}.vir-checkbox.disabled .inner{border-color:#c5c8ce;background-color:#c5c8ce}", ""]);
22492249
// Exports
22502250
module.exports = exports;
22512251

@@ -5977,7 +5977,7 @@ var VirtualCheckbox = __webpack_require__("74c9");
59775977
},
59785978
render: Function
59795979
},
5980-
emits: ['select-change', 'toggle-expand', 'check-change'],
5980+
emits: ['selectChange', 'toggleExpand', 'checkChange'],
59815981
setup: function setup(props, _ref) {
59825982
var emit = _ref.emit,
59835983
expose = _ref.expose;
@@ -6012,16 +6012,16 @@ var VirtualCheckbox = __webpack_require__("74c9");
60126012

60136013
var handleSelect = function handleSelect() {
60146014
if (!props.node.disabled) {
6015-
emit('select-change', props.node);
6015+
emit('selectChange', props.node);
60166016
}
60176017
};
60186018

60196019
var handleExpand = function handleExpand() {
6020-
emit('toggle-expand', props.node);
6020+
emit('toggleExpand', props.node);
60216021
};
60226022

60236023
var handleCheckChange = function handleCheckChange(checked) {
6024-
emit('check-change', [checked, props.node]);
6024+
emit('checkChange', [checked, props.node]);
60256025
};
60266026

60276027
var renderArrow = function renderArrow() {
@@ -6373,7 +6373,7 @@ var VirtualTree = __webpack_require__("039a");
63736373
loadData: Function,
63746374
render: Function
63756375
},
6376-
emits: ['selectChange', 'checkChange'],
6376+
emits: ['selectChange', 'checkChange', 'toggleExpand'],
63776377
setup: function setup(props, _ref) {
63786378
var emit = _ref.emit,
63796379
slots = _ref.slots,
@@ -6403,7 +6403,10 @@ var VirtualTree = __webpack_require__("039a");
64036403

64046404
node.selected = true;
64056405
selectedKey.value = node.nodeKey;
6406-
emit('selectChange', node);
6406+
emit('selectChange', {
6407+
preSelectedNode: flatList.value[preSelectedIndex],
6408+
node: node
6409+
});
64076410
}
64086411
};
64096412

@@ -6419,7 +6422,10 @@ var VirtualTree = __webpack_require__("039a");
64196422
updateUpwards(node, flatList.value);
64206423
}
64216424

6422-
emit('checkChange', node);
6425+
emit('checkChange', {
6426+
checked: checked,
6427+
node: node
6428+
});
64236429
};
64246430

64256431
var expandNode = function expandNode(node) {
@@ -6503,6 +6509,11 @@ var VirtualTree = __webpack_require__("039a");
65036509
} else {
65046510
collapseNode(node);
65056511
}
6512+
6513+
emit('toggleExpand', {
6514+
status: node.expanded,
6515+
node: node
6516+
});
65066517
};
65076518

65086519
var nodeRefs = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])([]);

‎lib/vue-virtual-tree.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-tree",
3-
"version": "3.1.1",
3+
"version": "3.1.2",
44
"description": "Tree component for large amount of data, base on Vue3",
55
"scripts": {
66
"serve": "vue-cli-service serve --port 4200",

‎src/components/VirtualCheckbox/index.scss

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,6 @@
4747
content: " ";
4848
}
4949
}
50-
&.disabled {
51-
color: $disable-color;
52-
cursor: not-allowed;
53-
.inner {
54-
border-color: $disable-color;
55-
background-color: $disable-color;
56-
}
57-
}
5850
&.checked {
5951
.inner {
6052
border-color: $primary-color;
@@ -65,4 +57,15 @@
6557
}
6658
}
6759
}
60+
&.disabled {
61+
color: $disable-color;
62+
cursor: not-allowed;
63+
.inner {
64+
border-color: $disable-color;
65+
background-color: $disable-color;
66+
&:after {
67+
//background-color: $disable-color;
68+
}
69+
}
70+
}
6871
}

‎src/components/VirtualTree/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default defineComponent({
3232
loadData: Function as PropType<(node: TreeNodeOptions, callback: (children: TreeNodeOptions[]) => void) => void>,
3333
render: Function
3434
},
35-
emits: ['selectChange', 'checkChange'],
35+
emits: ['selectChange', 'checkChange', 'toggleExpand'],
3636
setup(props, { emit, slots, expose }) {
3737
const loading = shallowRef(false);
3838
const selectedKey = ref<string | number>('');
@@ -49,7 +49,10 @@ export default defineComponent({
4949
}
5050
node.selected = true;
5151
selectedKey.value = node.nodeKey;
52-
emit('selectChange', node);
52+
emit('selectChange', {
53+
preSelectedNode: flatList.value[preSelectedIndex],
54+
node
55+
});
5356
}
5457
}
5558

@@ -60,7 +63,7 @@ export default defineComponent({
6063
updateDownwards(checked, node);
6164
updateUpwards(node, flatList.value);
6265
}
63-
emit('checkChange', node);
66+
emit('checkChange', { checked, node });
6467
}
6568

6669
const expandNode = (node: Required<TreeNodeOptions>, children: TreeNodeOptions[] = []) => {
@@ -124,6 +127,7 @@ export default defineComponent({
124127
} else {
125128
collapseNode(node);
126129
}
130+
emit('toggleExpand', { status: node.expanded, node });
127131
}
128132
const nodeRefs = ref<TreeNodeInstance[]>([]);
129133
const setRef = (index: number, node: any) => {

0 commit comments

Comments
 (0)