vue-lazy-cascader 0.1.12 → 0.1.14
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/README.md +11 -9
- package/lib/demo.html +1 -6
- package/lib/vue-lazy-cascader.common.js +14 -8
- package/lib/vue-lazy-cascader.common.js.map +1 -1
- package/lib/vue-lazy-cascader.umd.js +14 -8
- package/lib/vue-lazy-cascader.umd.js.map +1 -1
- package/lib/vue-lazy-cascader.umd.min.js +1 -1
- package/lib/vue-lazy-cascader.umd.min.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Vue Lazy Cascader 是一个vue2级联选择器组件，基于 element-ui 的级联组件。它保留了 el-cascader 的完整功能，并增加了滚动加载和远程搜索功能。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
7
|
您可以通过 npm、yarn 或 pnpm 来安装 Vue Lazy Cascader。
|
|
8
8
|
|
|
@@ -24,15 +24,17 @@ yarn add vue-lazy-cascader
|
|
|
24
24
|
pnpm install vue-lazy-cascader --save
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
##
|
|
28
|
-
由于该组件并未打包element-ui相关组件，所以使用时，必须已经安装element-ui。
|
|
27
|
+
## Usage
|
|
29
28
|
|
|
30
|
-
|
|
29
|
+
- [es模块示例](./src/components/VueLazyCascaderExample.vue)
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
```javascript
|
|
32
|
+
import VueLazyCascader from "vue-lazy-cascader";
|
|
33
|
+
```
|
|
33
34
|
|
|
34
|
-
|
|
35
|
-
import VueLazyCascader from "vue-lazy-cascader";
|
|
36
|
-
```
|
|
35
|
+
- [直接script引入示例](./example/index.html)
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
## Tip
|
|
38
|
+
- 由于该组件并未打包element-ui相关组件，所以使用时，必须已经安装element-ui。
|
|
39
|
+
- 级联value必须唯一，否则会出错。例如相同value的子节点无法插入到不同的父节点下（待修复）
|
|
40
|
+
- 是否是最后一页要判断准确，不能单纯用已加载和接口返回相加数量 == total进行判断，因为接口返回的可能已经加载过了。[详情请看代码（搜索时候会把搜索结果append到节点store中）](./src/components/cascader/src/cascader.vue)
|
package/lib/demo.html
CHANGED
|
@@ -1,6 +1 @@
|
|
|
1
|
-
<!
|
|
2
|
-
<script src="./vue-lazy-cascader.umd.js"></script>
|
|
3
|
-
<link rel="stylesheet" href="./vue-lazy-cascader.css" />
|
|
4
|
-
<script>
|
|
5
|
-
console.log(vue - lazy - cascader);
|
|
6
|
-
</script>
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>vue-lazy-cascader demo</title><script src="./vue-lazy-cascader.umd.js"></script><link rel="stylesheet" href="./vue-lazy-cascader.css"><script>console.log(vue-lazy-cascader)</script>
|
|
@@ -1606,7 +1606,7 @@ if (typeof window !== 'undefined') {
|
|
|
1606
1606
|
// Indicate to webpack that this file can be concatenated
|
|
1607
1607
|
/* harmony default export */ var setPublicPath = (null);
|
|
1608
1608
|
|
|
1609
|
-
;// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_css-loader@6.11.0_vue-template-compiler@2.6.14_webpack@5.91.0/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/.pnpm/vue-loader@15.11.1_css-loader@6.11.0_vue-template-compiler@2.6.14_webpack@5.91.0/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/cascader/src/cascader.vue?vue&type=template&id=
|
|
1609
|
+
;// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_css-loader@6.11.0_vue-template-compiler@2.6.14_webpack@5.91.0/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/.pnpm/vue-loader@15.11.1_css-loader@6.11.0_vue-template-compiler@2.6.14_webpack@5.91.0/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/cascader/src/cascader.vue?vue&type=template&id=65be7ea0
|
|
1610
1610
|
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(function () { return _vm.toggleDropDownVisible(false); }),expression:"() => toggleDropDownVisible(false)"}],ref:"reference",class:[
|
|
1611
1611
|
'el-cascader',
|
|
1612
1612
|
_vm.realSize && ("el-cascader--" + _vm.realSize),
|
|
@@ -5473,7 +5473,6 @@ const stopPropagation = e => e.stopPropagation();
|
|
|
5473
5473
|
panel.handleExpand(node);
|
|
5474
5474
|
},
|
|
5475
5475
|
handleMultiCheckChange(checked) {
|
|
5476
|
-
console.log(checked, 'checked---');
|
|
5477
5476
|
this.node.doCheck(checked);
|
|
5478
5477
|
this.panel.calculateMultiCheckedValue();
|
|
5479
5478
|
},
|
|
@@ -5797,11 +5796,18 @@ var cascader_node_component = normalizeComponent(
|
|
|
5797
5796
|
if (poor == parseInt(wrap.scrollTop) || poor == Math.ceil(wrap.scrollTop) || poor == Math.floor(wrap.scrollTop)) {
|
|
5798
5797
|
let parentNode = this.nodes[0] && this.nodes[0].parent;
|
|
5799
5798
|
const resolve = data => {
|
|
5799
|
+
if (isEmpty(data)) return; // 必须return，否则可能会死循环
|
|
5800
5800
|
// append当前父节点中不存在的节点到
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5801
|
+
const loadedVals = parentNode.children.map(n => n.getValue());
|
|
5802
|
+
const toAppendData = data.filter(d => !loadedVals.includes(d[this.panel.config.value]));
|
|
5803
|
+
if (toAppendData.length == 0) {
|
|
5804
|
+
this.$nextTick(() => {
|
|
5805
|
+
this.$emit('menu-scroll-bottom', parentNode, resolve);
|
|
5806
|
+
});
|
|
5807
|
+
return;
|
|
5808
|
+
}
|
|
5809
|
+
toAppendData.forEach(d => {
|
|
5810
|
+
this.panel.store.appendNode(d, parentNode);
|
|
5805
5811
|
});
|
|
5806
5812
|
// 同步checkedValue到节点checked
|
|
5807
5813
|
this.panel.syncMultiCheckState();
|
|
@@ -7377,7 +7383,7 @@ const InputSizeMap = {
|
|
|
7377
7383
|
const loadedFlattedNodesVals = this.panel.getFlattedNodes(false).map(n => n.value);
|
|
7378
7384
|
|
|
7379
7385
|
// 2.从data中过滤掉出没加载的数据, 并append到store
|
|
7380
|
-
const toAppendData = data.filter(
|
|
7386
|
+
const toAppendData = data.filter(d => !loadedFlattedNodesVals.includes(d[this.panel.config.value]));
|
|
7381
7387
|
// 2.1 如果没有待append的数据，说明用户给的data都是已经加载过的，那么emit触底事件
|
|
7382
7388
|
if (toAppendData.length == 0) {
|
|
7383
7389
|
this.$nextTick(() => {
|
|
@@ -7391,7 +7397,7 @@ const InputSizeMap = {
|
|
|
7391
7397
|
parentNode && this.panel.store.appendNode(d, parentNode);
|
|
7392
7398
|
});
|
|
7393
7399
|
// 3.根据checkedValue同步多选状态（用户一开始就传入了选中的value）
|
|
7394
|
-
this.panel.syncMultiCheckState();
|
|
7400
|
+
toAppendData.length && this.panel.syncMultiCheckState();
|
|
7395
7401
|
|
|
7396
7402
|
// 3.调用前端搜索方法
|
|
7397
7403
|
this.getSuggestions();
|