Selaa lähdekoodia

修改下拉框展示效果,过多则用tip来显示

mork 1 viikko sitten
vanhempi
sitoutus
ef1b677f4c
1 muutettua tiedostoa jossa 12 lisäystä ja 6 poistoa
  1. 12 6
      src/views/IndexView.vue

+ 12 - 6
src/views/IndexView.vue

@@ -8,14 +8,14 @@
       <div class="search-input">
         <el-autocomplete
         v-model="searchText"
-        popper-class="custom-dropdown"
+        popper-class="home-custom-dropdown"
         :popper-append-to-body="false"
         :fetch-suggestions="querySearchAsync"
         :placeholder="selectType == '0' ? '请输入地址' : '请输入员工'"
         clearable :clear-icon="CloseBold"
         @select="handleSelect"
         :fit-input-width="false"
-        :width="400"
+        show-overflow-tooltip
         >
           <template #append>
           <el-select v-model="selectType" placeholder="请选择搜索类型" style="width: 80px">
@@ -27,10 +27,11 @@
         <template #default="{ item }">
           <el-tooltip
             :content="item.value"
-            placement="top"
+            placement="right"
             effect="dark"
+            :disabled="!isOverflow"
           >
-            <div class="text-ellipsis">
+            <div class="text-ellipsis" @mouseenter="handleMouseEnter($event)">
               {{ item.value }}
             </div>
           </el-tooltip>
@@ -65,7 +66,6 @@ import commonAPI from "@/api/common";
 import Map from "@/components/Map.vue";
 import Header from "@/components/Header.vue";
 import DrawMap from "@/components/DrawMap.vue";
-import { showLoading, hideLoading } from "@/utils/loading";
 
 export default {
   name: "IndexView",
@@ -82,6 +82,7 @@ export default {
       selectType:'0',
       ygDataList:[],
       loginType: sessionStorage.getItem("gisLoginType") || '',
+      isOverflow: false,
     };
   },
   mounted() {
@@ -94,6 +95,11 @@ export default {
     initData(){
       this.getDmsDataList();
     },
+    handleMouseEnter(e) {
+      const dom = e.target
+      // 判断内容是否溢出:scrollWidth > clientWidth
+      this.isOverflow = dom.scrollWidth > dom.clientWidth
+    },
     getDmsDataList(){
       const that = this;
       let requestParams = {
@@ -283,7 +289,7 @@ export default {
   color: #fff !important;
 }
 
-.custom-dropdown {
+.home-custom-dropdown {
   width: 400px !important;
   max-width: 400px;
   overflow: auto;