widget.qw 1.0.9 → 1.0.10
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/build/style.css
CHANGED
|
@@ -709,25 +709,25 @@
|
|
|
709
709
|
margin:3px;
|
|
710
710
|
}
|
|
711
711
|
|
|
712
|
-
.cascader-pop[data-v-
|
|
712
|
+
.cascader-pop[data-v-3ed10092] {
|
|
713
713
|
width: 100%;
|
|
714
714
|
overflow: hidden;
|
|
715
715
|
}
|
|
716
|
-
.cascader-selector[data-v-
|
|
716
|
+
.cascader-selector[data-v-3ed10092] {
|
|
717
717
|
padding: 10px;
|
|
718
718
|
}
|
|
719
|
-
.search-buttons[data-v-
|
|
719
|
+
.search-buttons[data-v-3ed10092] {
|
|
720
720
|
display: flex;
|
|
721
721
|
gap: 10px;
|
|
722
722
|
}
|
|
723
|
-
.clear-btn[data-v-
|
|
723
|
+
.clear-btn[data-v-3ed10092] {
|
|
724
724
|
background-color: #f2f3f5;
|
|
725
725
|
border: none;
|
|
726
726
|
border-radius: 4px;
|
|
727
727
|
padding: 4px 8px;
|
|
728
728
|
font-size: 14px;
|
|
729
729
|
}
|
|
730
|
-
.confirm-btn[data-v-
|
|
730
|
+
.confirm-btn[data-v-3ed10092] {
|
|
731
731
|
background-color: #1989fa;
|
|
732
732
|
color: white;
|
|
733
733
|
border: none;
|
|
@@ -735,19 +735,19 @@
|
|
|
735
735
|
padding: 4px 8px;
|
|
736
736
|
font-size: 14px;
|
|
737
737
|
}
|
|
738
|
-
.no-results[data-v-
|
|
738
|
+
.no-results[data-v-3ed10092] {
|
|
739
739
|
text-align: center;
|
|
740
740
|
padding: 20px;
|
|
741
741
|
color: #969799;
|
|
742
742
|
}
|
|
743
|
-
.cascader-header[data-v-
|
|
743
|
+
.cascader-header[data-v-3ed10092] {
|
|
744
744
|
padding: 10px;
|
|
745
745
|
border-bottom: 1px solid #ebedf0;
|
|
746
746
|
display: flex;
|
|
747
747
|
justify-content: space-between;
|
|
748
748
|
align-items: center;
|
|
749
749
|
}
|
|
750
|
-
.current-path[data-v-
|
|
750
|
+
.current-path[data-v-3ed10092] {
|
|
751
751
|
flex: 1;
|
|
752
752
|
font-size: 14px;
|
|
753
753
|
color: #323233;
|
|
@@ -755,25 +755,25 @@
|
|
|
755
755
|
overflow: hidden;
|
|
756
756
|
text-overflow: ellipsis;
|
|
757
757
|
}
|
|
758
|
-
.header-right[data-v-
|
|
758
|
+
.header-right[data-v-3ed10092] {
|
|
759
759
|
display: flex;
|
|
760
760
|
gap: 8px;
|
|
761
761
|
margin-left: auto;
|
|
762
762
|
}
|
|
763
|
-
.cancel-btn[data-v-
|
|
763
|
+
.cancel-btn[data-v-3ed10092] {
|
|
764
764
|
color: #969799;
|
|
765
765
|
margin-right: 5px;
|
|
766
766
|
}
|
|
767
|
-
.scroll-container[data-v-
|
|
767
|
+
.scroll-container[data-v-3ed10092] {
|
|
768
768
|
height: calc(80vh - 150px);
|
|
769
769
|
overflow-y: auto;
|
|
770
770
|
}
|
|
771
|
-
.cell-content[data-v-
|
|
771
|
+
.cell-content[data-v-3ed10092] {
|
|
772
772
|
display: flex;
|
|
773
773
|
align-items: center;
|
|
774
774
|
gap: 12px;
|
|
775
775
|
}
|
|
776
|
-
.circle-selector[data-v-
|
|
776
|
+
.circle-selector[data-v-3ed10092] {
|
|
777
777
|
width: 20px;
|
|
778
778
|
height: 20px;
|
|
779
779
|
border-radius: 50%;
|
|
@@ -783,29 +783,29 @@
|
|
|
783
783
|
transition: all 0.2s;
|
|
784
784
|
flex-shrink: 0;
|
|
785
785
|
}
|
|
786
|
-
.circle-selector.selected[data-v-
|
|
786
|
+
.circle-selector.selected[data-v-3ed10092] {
|
|
787
787
|
background-color: #1989fa;
|
|
788
788
|
border-color: #1989fa;
|
|
789
789
|
}
|
|
790
|
-
.circle-selector.selected .van-icon[data-v-
|
|
790
|
+
.circle-selector.selected .van-icon[data-v-3ed10092] {
|
|
791
791
|
color: white;
|
|
792
792
|
font-size: 14px;
|
|
793
793
|
}
|
|
794
|
-
.van-cell__right-icon[data-v-
|
|
794
|
+
.van-cell__right-icon[data-v-3ed10092] {
|
|
795
795
|
color: #969799;
|
|
796
796
|
font-size: 16px;
|
|
797
797
|
margin-left: 8px;
|
|
798
798
|
}
|
|
799
|
-
.name[data-v-
|
|
799
|
+
.name[data-v-3ed10092] {
|
|
800
800
|
flex: 1;
|
|
801
801
|
overflow: hidden;
|
|
802
802
|
text-overflow: ellipsis;
|
|
803
803
|
white-space: nowrap;
|
|
804
804
|
}
|
|
805
|
-
.cancel-btn[data-v-
|
|
805
|
+
.cancel-btn[data-v-3ed10092] {
|
|
806
806
|
color: #969799;
|
|
807
807
|
}
|
|
808
|
-
.search-field[data-v-
|
|
808
|
+
.search-field[data-v-3ed10092] {
|
|
809
809
|
background: #fff;
|
|
810
810
|
padding: 10px 16px;
|
|
811
811
|
border-bottom: 1px solid #ebedf0;
|
package/build/widget.qw.es.js
CHANGED
|
@@ -20282,7 +20282,7 @@ const _sfc_main$3 = {
|
|
|
20282
20282
|
}
|
|
20283
20283
|
};
|
|
20284
20284
|
var TreePicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6744b874"]]);
|
|
20285
|
-
var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-
|
|
20285
|
+
var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-3ed10092] {\r\n width: 100%;\r\n overflow: hidden;\n}\n.cascader-selector[data-v-3ed10092] {\r\n padding: 10px;\n}\n.search-buttons[data-v-3ed10092] {\r\n display: flex;\r\n gap: 10px;\n}\n.clear-btn[data-v-3ed10092] {\r\n background-color: #f2f3f5;\r\n border: none;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 14px;\n}\n.confirm-btn[data-v-3ed10092] {\r\n background-color: #1989fa;\r\n color: white;\r\n border: none;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 14px;\n}\n.no-results[data-v-3ed10092] {\r\n text-align: center;\r\n padding: 20px;\r\n color: #969799;\n}\n.cascader-header[data-v-3ed10092] {\r\n padding: 10px;\r\n border-bottom: 1px solid #ebedf0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.current-path[data-v-3ed10092] {\r\n flex: 1;\r\n font-size: 14px;\r\n color: #323233;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\n}\n.header-right[data-v-3ed10092] {\r\n display: flex;\r\n gap: 8px;\r\n margin-left: auto;\n}\n.cancel-btn[data-v-3ed10092] {\r\n color: #969799;\r\n margin-right: 5px;\n}\n.scroll-container[data-v-3ed10092] {\r\n height: calc(80vh - 150px);\r\n overflow-y: auto;\n}\n.cell-content[data-v-3ed10092] {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\n}\n.circle-selector[data-v-3ed10092] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n flex-shrink: 0;\n}\n.circle-selector.selected[data-v-3ed10092] {\r\n background-color: #1989fa;\r\n border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-3ed10092] {\r\n color: white;\r\n font-size: 14px;\n}\n.van-cell__right-icon[data-v-3ed10092] {\r\n color: #969799;\r\n font-size: 16px;\r\n margin-left: 8px;\n}\n.name[data-v-3ed10092] {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\n}\n.cancel-btn[data-v-3ed10092] {\r\n color: #969799;\n}\n.search-field[data-v-3ed10092] {\r\n background: #fff;\r\n padding: 10px 16px;\r\n border-bottom: 1px solid #ebedf0;\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n margin-bottom: 10px;\r\n flex-shrink: 0;\r\n /* \u9632\u6B62\u538B\u7F29 */\n}\r\n")();
|
|
20286
20286
|
const _hoisted_1$1 = {
|
|
20287
20287
|
class: "cascader-selector"
|
|
20288
20288
|
};
|
|
@@ -20334,6 +20334,14 @@ const _sfc_main$2 = {
|
|
|
20334
20334
|
type: Function,
|
|
20335
20335
|
default: () => {
|
|
20336
20336
|
}
|
|
20337
|
+
},
|
|
20338
|
+
minLevel: {
|
|
20339
|
+
type: Number,
|
|
20340
|
+
default: 1
|
|
20341
|
+
},
|
|
20342
|
+
maxLevel: {
|
|
20343
|
+
type: Number,
|
|
20344
|
+
default: 9999
|
|
20337
20345
|
}
|
|
20338
20346
|
},
|
|
20339
20347
|
emits: ["update:show", "select"],
|
|
@@ -20349,6 +20357,9 @@ const _sfc_main$2 = {
|
|
|
20349
20357
|
currentNode: null,
|
|
20350
20358
|
selectedNodeId: ""
|
|
20351
20359
|
});
|
|
20360
|
+
const canSelect = (node) => {
|
|
20361
|
+
return node.level >= props.minLevel && node.level <= props.maxLevel;
|
|
20362
|
+
};
|
|
20352
20363
|
const optionNodes = computed(() => {
|
|
20353
20364
|
var _a;
|
|
20354
20365
|
if (data2.currentNode)
|
|
@@ -20488,7 +20499,8 @@ const _sfc_main$2 = {
|
|
|
20488
20499
|
return openBlock(), createBlock(_component_van_cell, {
|
|
20489
20500
|
key: i
|
|
20490
20501
|
}, createSlots({
|
|
20491
|
-
title: withCtx(() => [createElementVNode("div", _hoisted_9, [
|
|
20502
|
+
title: withCtx(() => [createElementVNode("div", _hoisted_9, [canSelect(item) ? (openBlock(), createElementBlock("div", {
|
|
20503
|
+
key: 0,
|
|
20492
20504
|
class: "circle-selector",
|
|
20493
20505
|
onClick: withModifiers(($event) => onToggle(item), ["stop"])
|
|
20494
20506
|
}, [data2.selectedNodeId === item.id ? (openBlock(), createBlock(_component_van_icon, {
|
|
@@ -20501,9 +20513,9 @@ const _sfc_main$2 = {
|
|
|
20501
20513
|
name: "circle",
|
|
20502
20514
|
size: "20",
|
|
20503
20515
|
color: "#e0e0e0"
|
|
20504
|
-
})) : createCommentVNode("", true)], 8, _hoisted_10), createElementVNode("span", _hoisted_11, toDisplayString(item.label), 1)])]),
|
|
20516
|
+
})) : createCommentVNode("", true)], 8, _hoisted_10)) : createCommentVNode("", true), createElementVNode("span", _hoisted_11, toDisplayString(item.label), 1)])]),
|
|
20505
20517
|
_: 2
|
|
20506
|
-
}, [item.hasChildren ? {
|
|
20518
|
+
}, [item.hasChildren && item.level < props.maxLevel ? {
|
|
20507
20519
|
name: "right-icon",
|
|
20508
20520
|
fn: withCtx(() => [createVNode(_component_van_icon, {
|
|
20509
20521
|
name: "arrow",
|
|
@@ -20518,7 +20530,7 @@ const _sfc_main$2 = {
|
|
|
20518
20530
|
};
|
|
20519
20531
|
}
|
|
20520
20532
|
};
|
|
20521
|
-
var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
20533
|
+
var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3ed10092"]]);
|
|
20522
20534
|
const _sfc_main$1 = {
|
|
20523
20535
|
__name: "CascaderPicker",
|
|
20524
20536
|
props: {
|
|
@@ -20559,6 +20571,14 @@ const _sfc_main$1 = {
|
|
|
20559
20571
|
type: Function,
|
|
20560
20572
|
default: () => {
|
|
20561
20573
|
}
|
|
20574
|
+
},
|
|
20575
|
+
minLevel: {
|
|
20576
|
+
type: Number,
|
|
20577
|
+
default: 1
|
|
20578
|
+
},
|
|
20579
|
+
maxLevel: {
|
|
20580
|
+
type: Number,
|
|
20581
|
+
default: 9999
|
|
20562
20582
|
}
|
|
20563
20583
|
},
|
|
20564
20584
|
emits: ["update:modelValue", "select"],
|
|
@@ -20637,8 +20657,10 @@ const _sfc_main$1 = {
|
|
|
20637
20657
|
placeholder: props.placeholder,
|
|
20638
20658
|
onSelect,
|
|
20639
20659
|
queryNodes: props.queryNodes,
|
|
20640
|
-
queryNode: props.queryNode
|
|
20641
|
-
|
|
20660
|
+
queryNode: props.queryNode,
|
|
20661
|
+
minLevel: props.minLevel,
|
|
20662
|
+
maxLevel: props.maxLevel
|
|
20663
|
+
}, null, 8, ["show", "modelValue", "placeholder", "queryNodes", "queryNode", "minLevel", "maxLevel"])], 64);
|
|
20642
20664
|
};
|
|
20643
20665
|
}
|
|
20644
20666
|
};
|
package/build/widget.qw.umd.js
CHANGED
|
@@ -20285,7 +20285,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20285
20285
|
}
|
|
20286
20286
|
};
|
|
20287
20287
|
var TreePicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6744b874"]]);
|
|
20288
|
-
var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-
|
|
20288
|
+
var CascaderPop_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.cascader-pop[data-v-3ed10092] {\r\n width: 100%;\r\n overflow: hidden;\n}\n.cascader-selector[data-v-3ed10092] {\r\n padding: 10px;\n}\n.search-buttons[data-v-3ed10092] {\r\n display: flex;\r\n gap: 10px;\n}\n.clear-btn[data-v-3ed10092] {\r\n background-color: #f2f3f5;\r\n border: none;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 14px;\n}\n.confirm-btn[data-v-3ed10092] {\r\n background-color: #1989fa;\r\n color: white;\r\n border: none;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 14px;\n}\n.no-results[data-v-3ed10092] {\r\n text-align: center;\r\n padding: 20px;\r\n color: #969799;\n}\n.cascader-header[data-v-3ed10092] {\r\n padding: 10px;\r\n border-bottom: 1px solid #ebedf0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.current-path[data-v-3ed10092] {\r\n flex: 1;\r\n font-size: 14px;\r\n color: #323233;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\n}\n.header-right[data-v-3ed10092] {\r\n display: flex;\r\n gap: 8px;\r\n margin-left: auto;\n}\n.cancel-btn[data-v-3ed10092] {\r\n color: #969799;\r\n margin-right: 5px;\n}\n.scroll-container[data-v-3ed10092] {\r\n height: calc(80vh - 150px);\r\n overflow-y: auto;\n}\n.cell-content[data-v-3ed10092] {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\n}\n.circle-selector[data-v-3ed10092] {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n flex-shrink: 0;\n}\n.circle-selector.selected[data-v-3ed10092] {\r\n background-color: #1989fa;\r\n border-color: #1989fa;\n}\n.circle-selector.selected .van-icon[data-v-3ed10092] {\r\n color: white;\r\n font-size: 14px;\n}\n.van-cell__right-icon[data-v-3ed10092] {\r\n color: #969799;\r\n font-size: 16px;\r\n margin-left: 8px;\n}\n.name[data-v-3ed10092] {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\n}\n.cancel-btn[data-v-3ed10092] {\r\n color: #969799;\n}\n.search-field[data-v-3ed10092] {\r\n background: #fff;\r\n padding: 10px 16px;\r\n border-bottom: 1px solid #ebedf0;\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n margin-bottom: 10px;\r\n flex-shrink: 0;\r\n /* \u9632\u6B62\u538B\u7F29 */\n}\r\n")();
|
|
20289
20289
|
const _hoisted_1$1 = {
|
|
20290
20290
|
class: "cascader-selector"
|
|
20291
20291
|
};
|
|
@@ -20337,6 +20337,14 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20337
20337
|
type: Function,
|
|
20338
20338
|
default: () => {
|
|
20339
20339
|
}
|
|
20340
|
+
},
|
|
20341
|
+
minLevel: {
|
|
20342
|
+
type: Number,
|
|
20343
|
+
default: 1
|
|
20344
|
+
},
|
|
20345
|
+
maxLevel: {
|
|
20346
|
+
type: Number,
|
|
20347
|
+
default: 9999
|
|
20340
20348
|
}
|
|
20341
20349
|
},
|
|
20342
20350
|
emits: ["update:show", "select"],
|
|
@@ -20352,6 +20360,9 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20352
20360
|
currentNode: null,
|
|
20353
20361
|
selectedNodeId: ""
|
|
20354
20362
|
});
|
|
20363
|
+
const canSelect = (node) => {
|
|
20364
|
+
return node.level >= props.minLevel && node.level <= props.maxLevel;
|
|
20365
|
+
};
|
|
20355
20366
|
const optionNodes = vue.computed(() => {
|
|
20356
20367
|
var _a;
|
|
20357
20368
|
if (data2.currentNode)
|
|
@@ -20491,7 +20502,8 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20491
20502
|
return vue.openBlock(), vue.createBlock(_component_van_cell, {
|
|
20492
20503
|
key: i
|
|
20493
20504
|
}, vue.createSlots({
|
|
20494
|
-
title: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_9, [vue.
|
|
20505
|
+
title: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_9, [canSelect(item) ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
20506
|
+
key: 0,
|
|
20495
20507
|
class: "circle-selector",
|
|
20496
20508
|
onClick: vue.withModifiers(($event) => onToggle(item), ["stop"])
|
|
20497
20509
|
}, [data2.selectedNodeId === item.id ? (vue.openBlock(), vue.createBlock(_component_van_icon, {
|
|
@@ -20504,9 +20516,9 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20504
20516
|
name: "circle",
|
|
20505
20517
|
size: "20",
|
|
20506
20518
|
color: "#e0e0e0"
|
|
20507
|
-
})) : vue.createCommentVNode("", true)], 8, _hoisted_10), vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(item.label), 1)])]),
|
|
20519
|
+
})) : vue.createCommentVNode("", true)], 8, _hoisted_10)) : vue.createCommentVNode("", true), vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(item.label), 1)])]),
|
|
20508
20520
|
_: 2
|
|
20509
|
-
}, [item.hasChildren ? {
|
|
20521
|
+
}, [item.hasChildren && item.level < props.maxLevel ? {
|
|
20510
20522
|
name: "right-icon",
|
|
20511
20523
|
fn: vue.withCtx(() => [vue.createVNode(_component_van_icon, {
|
|
20512
20524
|
name: "arrow",
|
|
@@ -20521,7 +20533,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20521
20533
|
};
|
|
20522
20534
|
}
|
|
20523
20535
|
};
|
|
20524
|
-
var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
20536
|
+
var CascaderPop = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3ed10092"]]);
|
|
20525
20537
|
const _sfc_main$1 = {
|
|
20526
20538
|
__name: "CascaderPicker",
|
|
20527
20539
|
props: {
|
|
@@ -20562,6 +20574,14 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20562
20574
|
type: Function,
|
|
20563
20575
|
default: () => {
|
|
20564
20576
|
}
|
|
20577
|
+
},
|
|
20578
|
+
minLevel: {
|
|
20579
|
+
type: Number,
|
|
20580
|
+
default: 1
|
|
20581
|
+
},
|
|
20582
|
+
maxLevel: {
|
|
20583
|
+
type: Number,
|
|
20584
|
+
default: 9999
|
|
20565
20585
|
}
|
|
20566
20586
|
},
|
|
20567
20587
|
emits: ["update:modelValue", "select"],
|
|
@@ -20640,8 +20660,10 @@ var __async = (__this, __arguments, generator) => {
|
|
|
20640
20660
|
placeholder: props.placeholder,
|
|
20641
20661
|
onSelect,
|
|
20642
20662
|
queryNodes: props.queryNodes,
|
|
20643
|
-
queryNode: props.queryNode
|
|
20644
|
-
|
|
20663
|
+
queryNode: props.queryNode,
|
|
20664
|
+
minLevel: props.minLevel,
|
|
20665
|
+
maxLevel: props.maxLevel
|
|
20666
|
+
}, null, 8, ["show", "modelValue", "placeholder", "queryNodes", "queryNode", "minLevel", "maxLevel"])], 64);
|
|
20645
20667
|
};
|
|
20646
20668
|
}
|
|
20647
20669
|
};
|
package/package.json
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<van-field v-if="!isGone" :label="props.label" readonly :required="isRequired" :rules="props.rules"
|
|
3
|
-
:placeholder="props.placeholder" :is-link="isReadonly ? false : true"
|
|
4
|
-
label-class="label">
|
|
2
|
+
<van-field v-if="!isGone" :label="props.label" readonly :required="isRequired" :rules="props.rules"
|
|
3
|
+
:disabled="isDisabled" :placeholder="props.placeholder" :is-link="isReadonly ? false : true"
|
|
4
|
+
@click="data.isShowPop = !isReadonly" label-class="label">
|
|
5
5
|
<template #input v-if="modelValue">
|
|
6
|
-
<van-tag class="selected-node" v-if="modelValue" :closeable="!isDisabled" color="#fff" text-color="#333"
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
<van-tag class="selected-node" v-if="modelValue" :closeable="!isDisabled" color="#fff" text-color="#333"
|
|
7
|
+
size="medium" @close.stop="onDelete">
|
|
8
|
+
{{ data.selectedNode.formatLabel }}
|
|
9
9
|
</van-tag>
|
|
10
10
|
</template>
|
|
11
11
|
</van-field>
|
|
12
12
|
|
|
13
|
-
<CascaderPop v-model:show="data.isShowPop"
|
|
14
|
-
|
|
15
|
-
:
|
|
16
|
-
@select="onSelect" :queryNodes="props.queryNodes" :queryNode="props.queryNode" />
|
|
13
|
+
<CascaderPop v-model:show="data.isShowPop" v-model="modelValue" :placeholder="props.placeholder" @select="onSelect"
|
|
14
|
+
:queryNodes="props.queryNodes" :queryNode="props.queryNode" :minLevel="props.minLevel"
|
|
15
|
+
:maxLevel="props.maxLevel" />
|
|
17
16
|
|
|
18
17
|
</template>
|
|
19
18
|
<script setup>
|
|
@@ -51,13 +50,21 @@ const props = defineProps({
|
|
|
51
50
|
type: String,
|
|
52
51
|
default: "",
|
|
53
52
|
},
|
|
54
|
-
queryNodes:{
|
|
55
|
-
type:Function,
|
|
56
|
-
default:()=>{}
|
|
53
|
+
queryNodes: {
|
|
54
|
+
type: Function,
|
|
55
|
+
default: () => { }
|
|
57
56
|
},
|
|
58
|
-
queryNode:{
|
|
59
|
-
type:Function,
|
|
60
|
-
default:()=>{}
|
|
57
|
+
queryNode: {
|
|
58
|
+
type: Function,
|
|
59
|
+
default: () => { }
|
|
60
|
+
},
|
|
61
|
+
minLevel: {
|
|
62
|
+
type: Number,
|
|
63
|
+
default: 1
|
|
64
|
+
},
|
|
65
|
+
maxLevel: {
|
|
66
|
+
type: Number,
|
|
67
|
+
default: 9999
|
|
61
68
|
}
|
|
62
69
|
});
|
|
63
70
|
|
|
@@ -81,8 +88,8 @@ const onSelect = (node) => {
|
|
|
81
88
|
emit('select', data.selectedNode)
|
|
82
89
|
}
|
|
83
90
|
|
|
84
|
-
const onDelete=()=>{
|
|
85
|
-
data.selectedNode={}
|
|
91
|
+
const onDelete = () => {
|
|
92
|
+
data.selectedNode = {}
|
|
86
93
|
modelValue.value = null
|
|
87
94
|
}
|
|
88
95
|
|
|
@@ -92,7 +99,7 @@ watch(() => modelValue.value, async (n, o) => {
|
|
|
92
99
|
return
|
|
93
100
|
}
|
|
94
101
|
|
|
95
|
-
props.queryNode((node)=>{
|
|
102
|
+
props.queryNode((node) => {
|
|
96
103
|
data.selectedNode = node
|
|
97
104
|
emit('select', data.selectedNode)
|
|
98
105
|
})
|
|
@@ -101,5 +108,4 @@ watch(() => modelValue.value, async (n, o) => {
|
|
|
101
108
|
})
|
|
102
109
|
</script>
|
|
103
110
|
|
|
104
|
-
<style scoped>
|
|
105
|
-
</style>
|
|
111
|
+
<style scoped></style>
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
<van-cell v-for="(item, i) in optionNodes" :key="i" >
|
|
31
31
|
<template #title>
|
|
32
32
|
<div class="cell-content">
|
|
33
|
-
<div class="circle-selector" @click.stop="onToggle(item)">
|
|
33
|
+
<div class="circle-selector" v-if="canSelect(item)" @click.stop="onToggle(item)">
|
|
34
34
|
<van-icon v-if="data.selectedNodeId === item.id" name="success" size="20" color="#409eff"/>
|
|
35
35
|
<van-icon v-if="data.selectedNodeId != item.id" name="circle" size="20" color="#e0e0e0"/>
|
|
36
36
|
</div>
|
|
37
37
|
<span class="name">{{ item.label }}</span>
|
|
38
38
|
</div>
|
|
39
39
|
</template>
|
|
40
|
-
<template #right-icon v-if="item.hasChildren" >
|
|
40
|
+
<template #right-icon v-if="item.hasChildren && item.level<props.maxLevel" >
|
|
41
41
|
<van-icon name="arrow" @click.stop="onNextLevel(item)"/>
|
|
42
42
|
</template>
|
|
43
43
|
</van-cell>
|
|
@@ -72,6 +72,14 @@ const props = defineProps({
|
|
|
72
72
|
queryNode: {
|
|
73
73
|
type: Function,
|
|
74
74
|
default: () => { }
|
|
75
|
+
},
|
|
76
|
+
minLevel:{
|
|
77
|
+
type:Number,
|
|
78
|
+
default: 1
|
|
79
|
+
},
|
|
80
|
+
maxLevel:{
|
|
81
|
+
type:Number,
|
|
82
|
+
default: 9999
|
|
75
83
|
}
|
|
76
84
|
});
|
|
77
85
|
// 定义emit
|
|
@@ -90,6 +98,10 @@ const data = reactive({
|
|
|
90
98
|
selectedNodeId: ''
|
|
91
99
|
})
|
|
92
100
|
|
|
101
|
+
const canSelect=(node)=>{
|
|
102
|
+
return node.level>=props.minLevel && node.level<=props.maxLevel
|
|
103
|
+
}
|
|
104
|
+
|
|
93
105
|
// 待选节点列表
|
|
94
106
|
const optionNodes = computed(() => {
|
|
95
107
|
if (data.currentNode)
|
|
Binary file
|