refactor

src/views/components/ConditionTags.vue

@@ -33,33 +33,34 @@ limitations under the License. -->
       @change="addLabels"
       :placeholder="t('addTags')"
     />
-    <span v-else>
-      <el-input
-        size="small"
-        v-model="tags"
-        class="trace-new-tag"
-        @click="showClick"
-        @input="searchTags"
-      />
-      <el-dropdown
-        ref="dropdownTag"
-        trigger="contextmenu"
-        :hide-on-click="false"
-        style="margin: 20px 0 0 -130px"
-        v-if="tagList.length"
-        :max-height="400"
-      >
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="(item, index) in tagList" :key="index">
-              <span @click="selectTag(item)" class="tag-item">
-                {{ item }}
-              </span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </span>
+    <el-popover
+      v-else
+      trigger="click"
+      style="margin: 10px 0 0 -130px"
+      :visible="visible"
+      width="300px"
+    >
+      <template #reference>
+        <el-input
+          size="small"
+          v-model="tags"
+          class="trace-new-tag"
+          @input="searchTags"
+          @blur="visible = false"
+          @focus="visible = true"
+        />
+      </template>
+      <div class="content">
+        <span
+          v-for="(item, index) in tagList"
+          :key="index"
+          @click="selectTag(item)"
+          class="tag-item"
+        >
+          {{ item }}
+        </span>
+      </div>
+    </el-popover>
     <span
       class="tags-tip"
       :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''"
@@ -87,7 +88,7 @@ import { useLogStore } from "@/store/modules/log";
 import { ElMessage } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
-/*global Nullable, defineEmits, defineProps */
+/*global defineEmits, defineProps */
 const emit = defineEmits(["update"]);
 const props = defineProps({
   type: { type: String, default: "TRACE" },
@@ -101,12 +102,12 @@ const tagsList = ref<string[]>([]);
 const tagArr = ref<string[]>([]);
 const tagList = ref<string[]>([]);
 const tagKeys = ref<string[]>([]);
+const visible = ref<boolean>(false);
 const tipsMap = {
   LOG: "logTagsTip",
   TRACE: "traceTagsTip",
   ALARM: "alarmTagsTip",
 };
-const dropdownTag = ref<Nullable<any>>(null);
 
 fetchTagKeys();
 
@@ -167,7 +168,6 @@ async function fetchTagValues() {
 }
 
 function selectTag(item: string) {
-  dropdownTag.value.handleClose();
   if (tags.value.includes("=")) {
     const key = tags.value.split("=")[0];
     tags.value = key + "=" + item;
@@ -194,11 +194,6 @@ function searchTags() {
   tagList.value = tagArr.value.filter((d: string) => d.includes(search));
 }
 
-function showClick() {
-  if (dropdownTag.value) {
-    dropdownTag.value.handleOpen();
-  }
-}
 watch(
   () => appStore.durationTime,
   () => {
@@ -243,6 +238,12 @@ watch(
 .tag-item {
   display: inline-block;
   min-width: 210px;
+  cursor: pointer;
+  margin-top: 10px;
+
+  &:hover {
+    color: #409eff;
+  }
 }
 
 .tags-tip {
@@ -269,4 +270,10 @@ watch(
 .icon-help {
   cursor: pointer;
 }
+
+.content {
+  width: 300px;
+  max-height: 400px;
+  overflow: auto;
+}
 </style>