فهرست منبع

fix: 算法添加下拉框和弹窗空白处点击时间错开

sunhongyao341504 1 سال پیش
والد
کامیت
1a5d69d87d
1فایلهای تغییر یافته به همراه35 افزوده شده و 12 حذف شده
  1. 35 12
      src/views/cameras/preview/components/AlgorithmsSetting/AddAlgoDialog.vue

+ 35 - 12
src/views/cameras/preview/components/AlgorithmsSetting/AddAlgoDialog.vue

@@ -3,19 +3,34 @@
     + 添加算法</ElButton
   >
 
-  <ElDialog v-model="visible" title="添加算法" @close="handleClose" width="500px">
-    <ElSelect v-model="selectedIds" multiple style="width: 100%" size="small">
-      <ElOption
-        v-for="item in allAlgoList"
-        :key="item.id"
-        :value="item.id"
-        :label="item.name"
-        :disabled="!!isAlgoBind(item.id)"
+  <ElDialog
+    v-model="visible"
+    title="添加算法"
+    @close="handleClose"
+    width="500px"
+    :close-on-click-modal="!algoListVisiable"
+  >
+    <div style="display: flex; justify-content: center">
+      <span>算法:</span>
+      <ElSelect
+        v-model="selectedIds"
+        multiple
+        style="width: 224px"
+        size="small"
+        @visible-change="handleVisibleChange"
       >
-        {{ item.name }}
-        <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
-      </ElOption>
-    </ElSelect>
+        <ElOption
+          v-for="item in allAlgoList"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+          :disabled="!!isAlgoBind(item.id)"
+        >
+          {{ item.name }}
+          <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
+        </ElOption>
+      </ElSelect>
+    </div>
 
     <template #footer>
       <el-button @click="handleClose">取消</el-button>
@@ -39,10 +54,18 @@
   const cameraDetailStore = useCameraDetailStore();
 
   const visible = ref(false);
+  const algoListVisiable = ref(false);
   const handleClose = () => {
     visible.value = false;
   };
 
+  const handleVisibleChange = (visible: boolean) => {
+    const t = setTimeout(() => {
+      algoListVisiable.value = visible;
+      clearTimeout(t);
+    }, 100);
+  };
+
   const handleSubmit = () => {
     if (selectedIds.value?.length < 1) {
       ElMessage.warning({ message: '请选择算法' });