widget.qw 1.0.35 → 1.0.37

package/build/style.css

@@ -99,31 +99,31 @@
   opacity: 1;
   -webkit-text-fill-color: #000;
 }
-.popup-style[data-v-57cfd397] {
+.popup-style[data-v-3f1c4b3e] {
   height: 21.25rem;
 }
-.showMultipleButton[data-v-57cfd397] {
+.showMultipleButton[data-v-3f1c4b3e] {
   padding-bottom: 0;
 }
-.showMultipleButton .van-button[data-v-57cfd397] {
+.showMultipleButton .van-button[data-v-3f1c4b3e] {
   border: 0;
 }
-.flex-between[data-v-57cfd397] {
+.flex-between[data-v-3f1c4b3e] {
   padding: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.bold[data-v-57cfd397] {
+.bold[data-v-3f1c4b3e] {
   font-weight: bold;
   color: #444;
 }
-.checkbox-style[data-v-57cfd397] {
+.checkbox-style[data-v-3f1c4b3e] {
   /* height: 220px; */
   height: calc(220px - 30px); 
   overflow-y: auto;
 }
-.select-all-container[data-v-57cfd397] {
+.select-all-container[data-v-3f1c4b3e] {
   font-size: 14px;
   padding: 0 16px;
   margin: 10px 0;
@@ -131,12 +131,12 @@
   justify-content: flex-end;
   align-items: center;
 }
-.select-all-container .van-checkbox[data-v-57cfd397] {
+.select-all-container .van-checkbox[data-v-3f1c4b3e] {
   margin-left: auto;
 }
 
 /* 新增：调整方形复选框的边距 */
-.van-checkbox--square[data-v-57cfd397] {
+.van-checkbox--square[data-v-3f1c4b3e] {
   margin-left: 8px;
 }
  

package/build/widget.qw.es.js

@@ -17107,7 +17107,7 @@ const _sfc_main$n = {
     };
   }
 };
-var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-57cfd397] {\r\n  height: 21.25rem;\n}\n.showMultipleButton[data-v-57cfd397] {\r\n  padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-57cfd397] {\r\n  border: 0;\n}\n.flex-between[data-v-57cfd397] {\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\n}\n.bold[data-v-57cfd397] {\r\n  font-weight: bold;\r\n  color: #444;\n}\n.checkbox-style[data-v-57cfd397] {\r\n  /* height: 220px; */\r\n  height: calc(220px - 30px); \r\n  overflow-y: auto;\n}\n.select-all-container[data-v-57cfd397] {\r\n  font-size: 14px;\r\n  padding: 0 16px;\r\n  margin: 10px 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\n}\n.select-all-container .van-checkbox[data-v-57cfd397] {\r\n  margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-57cfd397] {\r\n  margin-left: 8px;\n}\r\n \r\n")();
+var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-3f1c4b3e] {\r\n  height: 21.25rem;\n}\n.showMultipleButton[data-v-3f1c4b3e] {\r\n  padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-3f1c4b3e] {\r\n  border: 0;\n}\n.flex-between[data-v-3f1c4b3e] {\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\n}\n.bold[data-v-3f1c4b3e] {\r\n  font-weight: bold;\r\n  color: #444;\n}\n.checkbox-style[data-v-3f1c4b3e] {\r\n  /* height: 220px; */\r\n  height: calc(220px - 30px); \r\n  overflow-y: auto;\n}\n.select-all-container[data-v-3f1c4b3e] {\r\n  font-size: 14px;\r\n  padding: 0 16px;\r\n  margin: 10px 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\n}\n.select-all-container .van-checkbox[data-v-3f1c4b3e] {\r\n  margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-3f1c4b3e] {\r\n  margin-left: 8px;\n}\r\n \r\n")();
 const _hoisted_1$f = {
   class: "pad10 flex-between showMultipleButton"
 };
@@ -17127,18 +17127,16 @@ const _hoisted_7$6 = {
 const _sfc_main$m = {
   __name: "data_selector",
   props: {
-    mode: {
-      type: String,
-      default: "multiple",
-      validator: (v) => ["single", "multiple"].includes(v)
+    multiple: {
+      type: Boolean,
+      default: false
     },
     options: {
       type: Array,
       required: true
     },
     modelValue: {
-      type: [Array, String, Number],
-      default: () => []
+      type: [Array, String, Number]
     },
     rules: {
       type: Array,
@@ -17171,6 +17169,11 @@ const _sfc_main$m = {
       isDisabled
     } = util.props2auth(props);
     const selectedItems = ref([]);
+    const selectdItemsLabel = computed(() => {
+      if (!selectedItems.value)
+        return "";
+      return selectedItems.value.join(",");
+    });
     const popupVisible = ref(false);
     const searchKeyword = ref(null);
     const checkboxRefs = ref([]);
@@ -17191,7 +17194,7 @@ const _sfc_main$m = {
     const reShow = () => {
       if (props.modelValue) {
         if (Array.isArray(props.options)) {
-          if (props.mode === "multiple") {
+          if (props.multiple) {
             selectedItems.value = findTextsByValues(props.modelValue, props.options);
           } else {
             const foundItem = props.options.find((item) => item.value === props.modelValue);
@@ -17215,7 +17218,7 @@ const _sfc_main$m = {
       if (isReadonly.value) {
         return;
       }
-      if (props.mode === "multiple") {
+      if (props.multiple) {
         checkedValue.value = Array.isArray(props.modelValue) ? props.modelValue : [];
       } else {
         checkedValue.value = props.modelValue;
@@ -17226,7 +17229,7 @@ const _sfc_main$m = {
       popupVisible.value = false;
     };
     const confirmSelection = () => {
-      if (props.mode === "multiple") {
+      if (props.multiple) {
         selectedItems.value = findTextsByValues(checkedValue.value, props.options);
         emit("update:modelValue", checkedValue.value);
         emit("select", values2items(checkedValue.value));
@@ -17254,7 +17257,7 @@ const _sfc_main$m = {
       });
     });
     watch(checkedValue, () => {
-      if (props.mode === "multiple") {
+      if (props.multiple) {
         if (filteredColumns.value.length === 0) {
           isAllChecked.value = false;
         } else {
@@ -17292,7 +17295,7 @@ const _sfc_main$m = {
         type: "textarea",
         rows: "1",
         autosize: "",
-        modelValue: selectedItems.value,
+        modelValue: unref(selectdItemsLabel),
         readonly: "",
         clearable: "",
         required: unref(isRequired),
@@ -17335,7 +17338,7 @@ const _sfc_main$m = {
           },
           clearable: "",
           placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u5B57"
-        }, null, 8, ["modelValue"]), __props.mode === "multiple" ? (openBlock(), createElementBlock("div", _hoisted_5$7, [createVNode(_component_van_checkbox, {
+        }, null, 8, ["modelValue"]), props.multiple ? (openBlock(), createElementBlock("div", _hoisted_5$7, [createVNode(_component_van_checkbox, {
           shape: "square",
           modelValue: isAllChecked.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isAllChecked.value = $event),
@@ -17344,7 +17347,7 @@ const _sfc_main$m = {
         }, {
           default: withCtx(() => [_hoisted_6$6]),
           _: 1
-        }, 8, ["modelValue"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7$6, [__props.mode === "multiple" ? (openBlock(), createBlock(_component_van_checkbox_group, {
+        }, 8, ["modelValue"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7$6, [props.multiple ? (openBlock(), createBlock(_component_van_checkbox_group, {
           key: 0,
           modelValue: checkedValue.value,
           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => checkedValue.value = $event)
@@ -17399,7 +17402,7 @@ const _sfc_main$m = {
     };
   }
 };
-var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-57cfd397"]]);
+var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-3f1c4b3e"]]);
 var mult_list_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\r\n/* // \u4FEE\u6539 confirmation-group \u548C confirmation-item \u7684\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n  padding: 0 16px;\r\n  --van-checkbox-disabled-icon-color: black;\n}\n.confirmation-item[data-v-40a09897] {\r\n  padding: 12px 16px;\r\n  margin: 0 -16px;\r\n  border-bottom: 1px solid #f5f5f5;\r\n  /* \u7981\u7528\u72B6\u6001\u6837\u5F0F */\n}\r\n\r\n/* // \u5728\u4E0B\u65B9\u6DFB\u52A0\u5A92\u4F53\u67E5\u8BE2\u9002\u914D\u5C0F\u5C4F\u5E55 */\n@media (max-width: 320px) {\n.confirmation-item[data-v-40a09897] {\r\n    padding: 12px 8px;\r\n    margin: 0 -8px;\n}\n}\n.confirmation-item[data-v-40a09897]:last-child {\r\n  border-bottom: none;\n}\r\n\r\n/* \u65B0\u589E\u6837\u5F0F */\n.confirmation-tips[data-v-40a09897] {\r\n  padding: 12px 16px;\r\n  background: #f0faff;\r\n  border-radius: 8px;\r\n  margin: 10px 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  color: #1989fa;\r\n  font-size: 13px;\r\n  border: 1px solid #d9efff;\n}\n.confirmation-tips .van-icon[data-v-40a09897] {\r\n  margin-right: 8px;\n}\r\n\r\n/* \u65B0\u589E\u5B57\u4F53\u7EE7\u627F\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n  font-size: inherit;  /* \u7EE7\u627F\u7236\u7EA7\u5B57\u4F53\u5927\u5C0F */\n}\n.option-text[data-v-40a09897] {\r\n  font-size: 14px;  /* \u660E\u786E\u6307\u5B9A\u5B57\u4F53\u5927\u5C0F */\r\n  line-height: 1.5;  /* \u4FDD\u6301\u884C\u9AD8\u4E00\u81F4 */\r\n  /* color:black; */\n}\r\n\r\n/* \u9002\u914D\u79FB\u52A8\u7AEF\u7684\u5B57\u4F53\u8C03\u6574 */\n@media (max-width: 375px) {\n.option-text[data-v-40a09897] {\r\n    font-size: 13px;\n}\n}\r\n\r\n/* \u65B0\u589E\u7981\u7528\u72B6\u6001\u6837\u5F0F */\n.custom-checkbox[data-v-40a09897]:disabled .--van-checkbox__icon {\r\n  background-color: #f5f5f5;\r\n  border-color: #ebedf0;\r\n  transition: all 0.3s;\n}\n.custom-checkbox[data-v-40a09897]:disabled .van-checkbox__icon--checked {\r\n  background-color: #1989fa;\r\n  border-color: #1989fa;\r\n  opacity: 0.7;\n}\n.van-checkbox--disabled[data-v-40a09897] .option-text {\r\n  color: #969799;\n}\n.van-checkbox--disabled.van-checkbox--checked[data-v-40a09897] .option-text {\r\n  color: #1989fa;\r\n  opacity: 0.8;\n}\r\n")();
 const _hoisted_1$e = {
   key: 0,

package/build/widget.qw.umd.js

@@ -17110,7 +17110,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   };
-  var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-57cfd397] {\r\n  height: 21.25rem;\n}\n.showMultipleButton[data-v-57cfd397] {\r\n  padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-57cfd397] {\r\n  border: 0;\n}\n.flex-between[data-v-57cfd397] {\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\n}\n.bold[data-v-57cfd397] {\r\n  font-weight: bold;\r\n  color: #444;\n}\n.checkbox-style[data-v-57cfd397] {\r\n  /* height: 220px; */\r\n  height: calc(220px - 30px); \r\n  overflow-y: auto;\n}\n.select-all-container[data-v-57cfd397] {\r\n  font-size: 14px;\r\n  padding: 0 16px;\r\n  margin: 10px 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\n}\n.select-all-container .van-checkbox[data-v-57cfd397] {\r\n  margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-57cfd397] {\r\n  margin-left: 8px;\n}\r\n \r\n")();
+  var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-3f1c4b3e] {\r\n  height: 21.25rem;\n}\n.showMultipleButton[data-v-3f1c4b3e] {\r\n  padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-3f1c4b3e] {\r\n  border: 0;\n}\n.flex-between[data-v-3f1c4b3e] {\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\n}\n.bold[data-v-3f1c4b3e] {\r\n  font-weight: bold;\r\n  color: #444;\n}\n.checkbox-style[data-v-3f1c4b3e] {\r\n  /* height: 220px; */\r\n  height: calc(220px - 30px); \r\n  overflow-y: auto;\n}\n.select-all-container[data-v-3f1c4b3e] {\r\n  font-size: 14px;\r\n  padding: 0 16px;\r\n  margin: 10px 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\n}\n.select-all-container .van-checkbox[data-v-3f1c4b3e] {\r\n  margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-3f1c4b3e] {\r\n  margin-left: 8px;\n}\r\n \r\n")();
   const _hoisted_1$f = {
     class: "pad10 flex-between showMultipleButton"
   };
@@ -17130,18 +17130,16 @@ var __async = (__this, __arguments, generator) => {
   const _sfc_main$m = {
     __name: "data_selector",
     props: {
-      mode: {
-        type: String,
-        default: "multiple",
-        validator: (v) => ["single", "multiple"].includes(v)
+      multiple: {
+        type: Boolean,
+        default: false
       },
       options: {
         type: Array,
         required: true
       },
       modelValue: {
-        type: [Array, String, Number],
-        default: () => []
+        type: [Array, String, Number]
       },
       rules: {
         type: Array,
@@ -17174,6 +17172,11 @@ var __async = (__this, __arguments, generator) => {
         isDisabled
       } = util.props2auth(props);
       const selectedItems = vue.ref([]);
+      const selectdItemsLabel = vue.computed(() => {
+        if (!selectedItems.value)
+          return "";
+        return selectedItems.value.join(",");
+      });
       const popupVisible = vue.ref(false);
       const searchKeyword = vue.ref(null);
       const checkboxRefs = vue.ref([]);
@@ -17194,7 +17197,7 @@ var __async = (__this, __arguments, generator) => {
       const reShow = () => {
         if (props.modelValue) {
           if (Array.isArray(props.options)) {
-            if (props.mode === "multiple") {
+            if (props.multiple) {
               selectedItems.value = findTextsByValues(props.modelValue, props.options);
             } else {
               const foundItem = props.options.find((item) => item.value === props.modelValue);
@@ -17218,7 +17221,7 @@ var __async = (__this, __arguments, generator) => {
         if (isReadonly.value) {
           return;
         }
-        if (props.mode === "multiple") {
+        if (props.multiple) {
           checkedValue.value = Array.isArray(props.modelValue) ? props.modelValue : [];
         } else {
           checkedValue.value = props.modelValue;
@@ -17229,7 +17232,7 @@ var __async = (__this, __arguments, generator) => {
         popupVisible.value = false;
       };
       const confirmSelection = () => {
-        if (props.mode === "multiple") {
+        if (props.multiple) {
           selectedItems.value = findTextsByValues(checkedValue.value, props.options);
           emit("update:modelValue", checkedValue.value);
           emit("select", values2items(checkedValue.value));
@@ -17257,7 +17260,7 @@ var __async = (__this, __arguments, generator) => {
         });
       });
       vue.watch(checkedValue, () => {
-        if (props.mode === "multiple") {
+        if (props.multiple) {
           if (filteredColumns.value.length === 0) {
             isAllChecked.value = false;
           } else {
@@ -17295,7 +17298,7 @@ var __async = (__this, __arguments, generator) => {
           type: "textarea",
           rows: "1",
           autosize: "",
-          modelValue: selectedItems.value,
+          modelValue: vue.unref(selectdItemsLabel),
           readonly: "",
           clearable: "",
           required: vue.unref(isRequired),
@@ -17338,7 +17341,7 @@ var __async = (__this, __arguments, generator) => {
             },
             clearable: "",
             placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u5B57"
-          }, null, 8, ["modelValue"]), __props.mode === "multiple" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [vue.createVNode(_component_van_checkbox, {
+          }, null, 8, ["modelValue"]), props.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [vue.createVNode(_component_van_checkbox, {
             shape: "square",
             modelValue: isAllChecked.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isAllChecked.value = $event),
@@ -17347,7 +17350,7 @@ var __async = (__this, __arguments, generator) => {
           }, {
             default: vue.withCtx(() => [_hoisted_6$6]),
             _: 1
-          }, 8, ["modelValue"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7$6, [__props.mode === "multiple" ? (vue.openBlock(), vue.createBlock(_component_van_checkbox_group, {
+          }, 8, ["modelValue"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7$6, [props.multiple ? (vue.openBlock(), vue.createBlock(_component_van_checkbox_group, {
             key: 0,
             modelValue: checkedValue.value,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => checkedValue.value = $event)
@@ -17402,7 +17405,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   };
-  var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-57cfd397"]]);
+  var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-3f1c4b3e"]]);
   var mult_list_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\r\n/* // \u4FEE\u6539 confirmation-group \u548C confirmation-item \u7684\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n  padding: 0 16px;\r\n  --van-checkbox-disabled-icon-color: black;\n}\n.confirmation-item[data-v-40a09897] {\r\n  padding: 12px 16px;\r\n  margin: 0 -16px;\r\n  border-bottom: 1px solid #f5f5f5;\r\n  /* \u7981\u7528\u72B6\u6001\u6837\u5F0F */\n}\r\n\r\n/* // \u5728\u4E0B\u65B9\u6DFB\u52A0\u5A92\u4F53\u67E5\u8BE2\u9002\u914D\u5C0F\u5C4F\u5E55 */\n@media (max-width: 320px) {\n.confirmation-item[data-v-40a09897] {\r\n    padding: 12px 8px;\r\n    margin: 0 -8px;\n}\n}\n.confirmation-item[data-v-40a09897]:last-child {\r\n  border-bottom: none;\n}\r\n\r\n/* \u65B0\u589E\u6837\u5F0F */\n.confirmation-tips[data-v-40a09897] {\r\n  padding: 12px 16px;\r\n  background: #f0faff;\r\n  border-radius: 8px;\r\n  margin: 10px 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  color: #1989fa;\r\n  font-size: 13px;\r\n  border: 1px solid #d9efff;\n}\n.confirmation-tips .van-icon[data-v-40a09897] {\r\n  margin-right: 8px;\n}\r\n\r\n/* \u65B0\u589E\u5B57\u4F53\u7EE7\u627F\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n  font-size: inherit;  /* \u7EE7\u627F\u7236\u7EA7\u5B57\u4F53\u5927\u5C0F */\n}\n.option-text[data-v-40a09897] {\r\n  font-size: 14px;  /* \u660E\u786E\u6307\u5B9A\u5B57\u4F53\u5927\u5C0F */\r\n  line-height: 1.5;  /* \u4FDD\u6301\u884C\u9AD8\u4E00\u81F4 */\r\n  /* color:black; */\n}\r\n\r\n/* \u9002\u914D\u79FB\u52A8\u7AEF\u7684\u5B57\u4F53\u8C03\u6574 */\n@media (max-width: 375px) {\n.option-text[data-v-40a09897] {\r\n    font-size: 13px;\n}\n}\r\n\r\n/* \u65B0\u589E\u7981\u7528\u72B6\u6001\u6837\u5F0F */\n.custom-checkbox[data-v-40a09897]:disabled .--van-checkbox__icon {\r\n  background-color: #f5f5f5;\r\n  border-color: #ebedf0;\r\n  transition: all 0.3s;\n}\n.custom-checkbox[data-v-40a09897]:disabled .van-checkbox__icon--checked {\r\n  background-color: #1989fa;\r\n  border-color: #1989fa;\r\n  opacity: 0.7;\n}\n.van-checkbox--disabled[data-v-40a09897] .option-text {\r\n  color: #969799;\n}\n.van-checkbox--disabled.van-checkbox--checked[data-v-40a09897] .option-text {\r\n  color: #1989fa;\r\n  opacity: 0.8;\n}\r\n")();
   const _hoisted_1$e = {
     key: 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/components/data_selector.vue

@@ -6,7 +6,7 @@
       type="textarea"
       rows="1"
       autosize
-      :modelValue="selectedItems" 
+      :modelValue="selectdItemsLabel" 
       readonly  
       clearable 
       :required="isRequired" 
@@ -29,12 +29,12 @@
         <!-- 搜索框 -->
         <van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入搜索关键字" />
         <!-- 全选 -->
-        <div v-if="mode === 'multiple'" class="select-all-container">
+        <div v-if="props.multiple" class="select-all-container">
           <van-checkbox shape="square" v-model="isAllChecked" @click="toggleAllSelect" label-position="left">全选</van-checkbox>
         </div>
         <!-- 数据列表 -->
         <div class="checkbox-style">
-          <van-checkbox-group v-model="checkedValue" v-if="mode === 'multiple'">
+          <van-checkbox-group v-model="checkedValue" v-if="props.multiple">
             <van-cell-group>
               <van-cell v-for="(item, index) in filteredColumns" :key="index" :title="item.text" clickable
                 @click="toggle(index)">
@@ -72,18 +72,16 @@ import { onMounted, ref, onBeforeUpdate, computed, nextTick, watch } from "vue"
 import util from '../util'
 
 const props = defineProps({
-  mode: {
-    type: String,
-    default: 'multiple', // 'single' | 'multiple'
-    validator: (v) => ['single', 'multiple'].includes(v)
+  multiple:{
+    type:Boolean,
+    default:false
   },
   options: {
     type: Array,
     required: true,
   },
   modelValue: {
-    type: [Array, String, Number],
-    default: () => [],
+    type: [Array, String, Number]
   },
   rules: {
     type: Array,
@@ -109,6 +107,12 @@ const {isRequired, isReadonly, isGone,isDisabled} = util.props2auth(props)
 const emit = defineEmits(["update:modelValue","select"]);
 
 const selectedItems = ref([]);
+const selectdItemsLabel = computed(()=>{
+  if(!selectedItems.value)
+    return ''
+
+  return selectedItems.value.join(',')
+})
 const popupVisible = ref(false);
 const searchKeyword = ref(null);
 const checkboxRefs = ref([]);
@@ -133,7 +137,7 @@ const values2items = (values)=>{
 const reShow = () => {
   if (props.modelValue) {
     if (Array.isArray(props.options)) {
-      if (props.mode === 'multiple') {
+      if (props.multiple) {
         selectedItems.value = findTextsByValues(props.modelValue, props.options);
       } else {
         const foundItem = props.options.find((item) => item.value === props.modelValue);
@@ -162,7 +166,7 @@ const showPopup = () => {
   if (isReadonly.value) {
     return;
   }
-  if (props.mode === 'multiple') {
+  if (props.multiple) {
     checkedValue.value = Array.isArray(props.modelValue) ? props.modelValue : [];
   } else {
     checkedValue.value = props.modelValue;
@@ -175,7 +179,7 @@ const cancelSelection = () => {
 };
 
 const confirmSelection = () => {
-  if (props.mode === 'multiple') {
+  if (props.multiple) {
     selectedItems.value = findTextsByValues(checkedValue.value, props.options);
     emit("update:modelValue", checkedValue.value);
     emit("select",values2items(checkedValue.value))
@@ -207,7 +211,7 @@ const filteredColumns = computed(() => {
 });
 
 watch(checkedValue, () => {
-  if (props.mode === 'multiple') {
+  if (props.multiple) {
     if (filteredColumns.value.length === 0) {
       isAllChecked.value = false;
     } else {

package/src/views/dataSelector/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="page">
-        <widget-qw-data-selector :options="options" v-model="formData.singleSelect" mode="single" label="单选数据"
+        <widget-qw-data-selector :options="options" v-model="formData.singleSelect" label="单选数据"
             placeholder="单选数据" :auth="formData.auth" />
-        <widget-qw-data-selector :options="options" v-model="formData.multSelect" mode="multiple" label="多选数据"
+        <widget-qw-data-selector :options="options" v-model="formData.multSelect" multiple label="多选数据"
             placeholder="多选数据" :required="true" :readonly="false" />
     </div>
 </template>