增加接口联调

src/components/multipleSelect.vue

@@ -10,7 +10,7 @@
             </view>
             <!-- 显示框 -->
             <view class="uni-select-multiple" v-show="realValue.length">
-                <block v-if="multiple" >
+                <block v-if="multiple">
                     <view class="uni-select-multiple-item" v-for="(item, index) in changevalue" :key="index">
                         {{ item[slabel] }}
                         <view class="close-icon" v-if="showValueClear">
@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, defineExpose} from "vue";
+import { onMounted, reactive, ref, defineExpose, watch} from "vue";
 
 const props = defineProps({
     // 是否显示全部清空按钮
@@ -108,10 +108,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["change"]);
 const active = ref(false); // 组件是否激活，
-let changevalue = reactive([]);
-let realValue = reactive([]);
+let changevalue = ref([]);
+let realValue = ref([]);
 onMounted(() => {
-    // init();
+    init();
 });
 
 // 初始化函数
@@ -120,16 +120,16 @@ const init = () => {
         props.options.forEach((item) => {
             props.value.forEach((i) => {
                 if (item[props.svalue] === i) {
-                    changevalue.push(item);
+                    changevalue.value.push(item);
                 }
             })
         })
-        realValue = props.value;
-        console.log("props---", changevalue);
+        realValue.value = props.value;
+        // console.log("props---", changevalue.value);
 
     } else {
-        changevalue = [];
-        realValue = [];
+        changevalue.value = [];
+        realValue.value = [];
     }
 };
 // 点击展示选项
@@ -140,13 +140,13 @@ const handleSelect = () => {
 // 移除数据
 const handleRemove = (index) => {
     if (index === null) {
-        realValue = [];
-        changevalue = [];
+        realValue.value = [];
+        changevalue.value = [];
     } else {
-        realValue.splice(index, 1);
-        changevalue.splice(index, 1);
+        realValue.value.splice(index, 1);
+        changevalue.value.splice(index, 1);
     }
-    emit("change", changevalue, realValue);
+    emit("change", changevalue.value, realValue.value);
 };
 // 点击组件某一项
 const handleChange = (index, item) => {
@@ -154,26 +154,26 @@ const handleChange = (index, item) => {
     // 如果是单选框，选中一项后直接关闭
     if (!props.multiple) {
         console.log("关闭下拉框");
-        changevalue.length = 0
+        changevalue.value.length = 0
         realValue.length = 0
-        changevalue.push(item);
-        realValue.push(item[props.svalue])
+        changevalue.value.push(item);
+        realValue.value.push(item[props.svalue])
         active.value = !active.value;
     } else {
         // 多选操作
-        const arrIndex = realValue.indexOf(item[props.svalue]);
+        const arrIndex = realValue.value.indexOf(item[props.svalue]);
         if (arrIndex > -1) {
             // 如果该选项已经选中，当点击后就不选中
-            changevalue.splice(arrIndex, 1);
-            realValue.splice(arrIndex, 1);
+            changevalue.value.splice(arrIndex, 1);
+            realValue.value.splice(arrIndex, 1);
         } else {
             // 否则选中该选项
-            changevalue.push(item);
-            realValue.push(item[props.svalue]);
+            changevalue.value.push(item);
+            realValue.value.push(item[props.svalue]);
         }
     }
     // 触发回调函数
-    emit("change", changevalue, realValue);
+    emit("change", changevalue.value, realValue.value);
 };
 
 // 失去焦点时关闭选项列表