feat: 已选筛选条件新增鼠标滑过展示提示交互

apps/bigmember_pc/src/views/search/bidding/components/current-filter-text.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, watch } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 const props = defineProps({
   data: {
     type: Object,
@@ -33,72 +33,66 @@ function calcItemWidth() {
 nextTick(() => {
   calcItemWidth()
 })
+
+const textKeyObj = computed(() => {
+  return {
+    publishTime: props.data.publishTimeText,
+    selectType: props.data.scopeText,
+    regionMap: props.data.regionMapText,
+    subtype: props.data.infoTypeText,
+    industry: props.data.industryText ? `行业：${props.data.industryText}` : '',
+    fileExists: props.data.fileExistsText,
+    price: props.data.priceText,
+    mobileTag:
+      props.data.mobileTagText && props.data.mobileTagText !== 'all'
+        ? props.data.mobileTagText
+        : '',
+    buyerclass: props.data.buyerClassText
+      ? `采购单位类型：${props.data.buyerClassText}`
+      : '',
+    buyertel: props.data.buyerTelText,
+    winnertel: props.data.winnerTelText,
+    notkey: props.data.notkey ? `排除词：${props.data.notkey}` : '',
+    buyer: props.data.buyer ? `采购单位：${props.data.buyer}` : '',
+    winner: props.data.winner ? `中标企业：${props.data.winner}` : '',
+    agency: props.data.agency ? `招标代理：${props.data.agency}` : ''
+  }
+})
 </script>
 
 <template>
   <ul class="current-filter-text-box">
-    <li>
-      <span class="f-value">{{ data.publishTimeText }}</span>
-    </li>
-    <li>
-      <span class="f-value">{{ data.scopeText }}</span>
-    </li>
-    <li v-if="data.regionMapText">
-      <span class="f-value">{{ data.regionMapText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('regionMap')"></i>
-    </li>
-    <li v-if="data.infoTypeText">
-      <span class="f-value">{{ data.infoTypeText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('subtype')"></i>
-    </li>
-    <li v-if="data.industryText">
-      <span class="f-value">行业：{{ data.industryText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('industry')"></i>
-    </li>
-    <li v-if="data.fileExistsText">
-      <span class="f-value">{{ data.fileExistsText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('fileExists')"></i>
-    </li>
-    <li v-if="data.priceText">
-      <span class="f-value">{{ data.priceText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('price')"></i>
-    </li>
-    <!--融创-->
-    <li v-if="data.mobileTagText && data.mobileTagText !== 'all'">
-      <span class="f-value">{{ data.mobileTagText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('mobileTag')"></i>
-    </li>
-    <li v-if="data.buyerClassText">
-      <span class="f-value">采购单位类型：{{ data.buyerClassText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('buyerclass')"></i>
-    </li>
-    <li v-if="data.buyerTelText">
-      <span class="f-value">{{ data.buyerTelText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('buyertel')"></i>
-    </li>
-    <li v-if="data.winnerTelText">
-      <span class="f-value">{{ data.winnerTelText }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('winnertel')"></i>
-    </li>
-    <li v-if="data.notkey">
-      <span class="f-value">排除词：{{ data.notkey }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('notkey')"></i>
-    </li>
-    <li v-if="data.buyer">
-      <span class="f-value">采购单位：{{ data.buyer }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('buyer')"></i>
-    </li>
-    <li v-if="data.winner">
-      <span class="f-value">中标企业：{{ data.winner }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('winner')"></i>
-    </li>
-    <li v-if="data.agency">
-      <span class="f-value">招标代理：{{ data.agency }}</span>
-      <i class="iconfont icon-close" @click="closeCallBack('agency')"></i>
-    </li>
+    <template v-for="(value, key) in textKeyObj">
+      <el-tooltip
+        class="f-text-tip"
+        effect="dark"
+        placement="top"
+        :content="value"
+        popper-class="f-text-tip"
+        v-if="value"
+      >
+        <li>
+          <span class="f-value">{{ value }}</span>
+          <i
+            class="iconfont icon-close"
+            @click="closeCallBack(key)"
+            v-if="key !== 'publishTime' && key !== 'selectType'"
+          ></i>
+        </li>
+      </el-tooltip>
+    </template>
   </ul>
 </template>
 
+<style lang="scss">
+.f-text-tip {
+  max-width: 300px;
+  &.el-tooltip__popper[x-placement^='top'] .popper__arrow {
+    bottom: -5px !important;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .current-filter-text-box {
   max-height: 102px;