实用工具提示指令，默认展示方式为top

src/components/Enterprise/hotPromoted.vue

@@ -8,7 +8,7 @@
             <v-img :src="item?.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" alt="" width="77" height="77" style="border-radius: 4px;"/>
           </div>
           <div class="company-info cursor-pointer">
-            <!-- <h3 v-ellipse-tooltip.top>{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3> -->
+            <!-- <h3 v-ellipse-tooltip>{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3> -->
             <h3 :ref="el => { if(el) companyNameRefs[index] = el }">
               {{ formatName(item.enterprise.anotherName || item.enterprise.name) }}
               <v-tooltip v-if="isTextOverflow[index]" activator="parent" location="top">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</v-tooltip>
@@ -20,15 +20,17 @@
             </p>
           </div>
         </div>
-        <div v-ellipse-tooltip.top class="px-5 py-1 ellipsis-tag" :style="{'height': '33px', 'border-bottom': item.enterprise.welfareList && item.enterprise.welfareList.length ? '1px solid #EBEBEB' : 'none'}">
-          <span class="welfareTag" v-for="(k, i) in item.enterprise.welfareList" :key="i">{{ spaces(i ? 4 : 0) + k }}</span>
+
+        <div v-if="item?.enterprise?.welfareTagStr" style="padding: 6px 0; border-bottom: 1px solid #EBEBEB">
+          <div v-ellipse-tooltip class="px-5 welfareTag ellipsis-tag">{{ item.enterprise.welfareTagStr }}</div>
         </div>
+
         <!-- 职位列表 -->
         <ul class="company-job-list pt-3">
           <li v-for="(k, i) in item.jobList" :key="i" @mouseenter="k.active = true" @mouseleave="k.active = false" @click="handleClickPosition(k)">
             <v-card :elevation="k.active ? 5 : 0" class="company-job-item cursor-pointer mb-3">
               <div class="mb-2 d-flex">
-                <span v-ellipse-tooltip.top :class="['name', 'cursor-pointer', {'default-active': k.active }]" :style="{'max-width': !k.payFrom && !k.payTo ? '290px' : '200px'}">{{ formatName(k.name) }}</span>
+                <span v-ellipse-tooltip :class="['name', 'cursor-pointer', {'default-active': k.active }]" :style="{'max-width': !k.payFrom && !k.payTo ? '290px' : '200px'}">{{ formatName(k.name) }}</span>
                 <span v-if="!k.payFrom && !k.payTo" class="salary">面议</span>
                 <span v-else class="salary">{{ k.payFrom ? k.payFrom + '-' : '' }}{{ k.payTo }}{{ k.payName ? '/' + k.payName : '' }}</span>
               </div>

src/components/Position/item.vue

@@ -8,12 +8,12 @@
         <div class="job-info">
           <div class="sub-li-top">
             <div class="sub-li-info">
-              <p v-ellipse-tooltip.top :class="['name', {'default-active': item.active }]">{{ formatName(item.name) }}</p>
+              <p v-ellipse-tooltip :class="['name', {'default-active': item.active }]">{{ formatName(item.name) }}</p>
               <svg-icon v-if="tab === 3 && item.hire" name="pin" size="30"></svg-icon>
             </div>
           </div>
           <div class="d-flex justify-space-between align-center">
-            <div v-ellipse-tooltip.top class="text-truncate" style="color: #808080;" :style="{'width': !item.payFrom && !item.payTo ? '290px' : '190px'}">
+            <div v-ellipse-tooltip class="text-truncate" style="color: #808080;" :style="{'width': !item.payFrom && !item.payTo ? '290px' : '190px'}">
               <span v-for="(j, i) in desc" :key="i" class="font-size-13" style="">
                 <span
                   v-if="item[j.value] || j.value === 'areaName'"
@@ -33,7 +33,7 @@
               <p v-else class="salary">{{ item.payFrom ? item.payFrom + '-' : '' }}{{ item.payTo }}{{ item.payName ? '/' + item.payName : '' }}</p>
             </div>
           </div>
-          <div v-ellipse-tooltip.top class="ellipsis" style="height: 24px;overflow: hidden;">
+          <div v-ellipse-tooltip class="ellipsis" style="height: 24px;overflow: hidden;">
             <span v-for="(j, i) in item.tagList" :key="i" class="mr-3 tags" style="color: #345768;">{{ j }}</span>
           </div>
           <div v-if="tab === 3 && item.hire" class="text-end mt-3">
@@ -48,7 +48,7 @@
               <v-avatar size="35">
                 <v-img :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" />
               </v-avatar>
-              <span v-ellipse-tooltip.top class="names ml-2 font-size-14 text-truncate" style="max-width: 88%;">
+              <span v-ellipse-tooltip class="names ml-2 font-size-14 text-truncate" style="max-width: 88%;">
                 {{ formatName(item.anotherName || item.enterpriseName) }}
                 <span class="color-999 font-size-13 ml-3">
                   <span>{{ item.industryName }}</span>

src/components/Position/longStrip.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="info-content" >
         <div class="job-info">
-          <div v-ellipse-tooltip.top class="job-name ellipsis" :class="{'cursor-pointer': val.job.status === '0'}">
+          <div v-ellipse-tooltip class="job-name ellipsis" :class="{'cursor-pointer': val.job.status === '0'}">
             <span class="mr-3" :class="{'info-name': val.job.status === '0'}" @click.stop="handleToPositionDetails(val)">{{ formatName(val.job.name) }}</span>
             <span>
               [{{ !val.job.areaId ? '全国' : val.job.area?.str }}]
@@ -37,8 +37,8 @@
             <v-img width="50" height="50" :src="val.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/7.png'"></v-img>
           </div>
           <div class="ml-3">
-            <div v-ellipse-tooltip.top class="cursor-pointer ellipsis info-name" style="max-width: 480px;" @click.stop="jumpToEnterpriseDetail(val.enterprise.id)">{{ formatName(val.enterprise.anotherName || val.enterprise.name) }}</div>
-            <div v-ellipse-tooltip.top class="mt-3 ellipsis color-666 font-size-13" style="max-width: 260px;">
+            <div v-ellipse-tooltip class="cursor-pointer ellipsis info-name" style="max-width: 480px;" @click.stop="jumpToEnterpriseDetail(val.enterprise.id)">{{ formatName(val.enterprise.anotherName || val.enterprise.name) }}</div>
+            <div v-ellipse-tooltip class="mt-3 ellipsis color-666 font-size-13" style="max-width: 260px;">
               <span v-for="(k, i) in desc" :key="k">
                 {{ val.enterprise[k] }}
                 <span v-if="i !== desc.length - 1 && val.enterprise[k] && val.enterprise[desc[i + 1]]" class="septal-line"></span>

src/components/PositionLongStrip/item.vue

@@ -14,8 +14,8 @@
           </div>
           <div>
             <div class="d-flex">
-              <p v-ellipse-tooltip.top v-if="item.job.name.indexOf('style')" v-html="item.job.name" :class="['title1', {'default-active': item.positionActive }]"></p>
-              <p v-else v-ellipse-tooltip.top :class="['title1', {'default-active': item.positionActive }]">{{ formatName(item.job.name) }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
+              <p v-ellipse-tooltip v-if="item.job.name.indexOf('style')" v-html="item.job.name" :class="['title1', {'default-active': item.positionActive }]"></p>
+              <p v-else v-ellipse-tooltip :class="['title1', {'default-active': item.positionActive }]">{{ formatName(item.job.name) }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
               <p v-if="!item.job.payFrom && !item.job.payTo" class="salary ml-1">面议</p>
               <p v-else class="salary ml-1">{{ item.job.payFrom ? item.job.payFrom + '-' : '' }}{{ item.job.payTo }}{{ item.job.payName ? '/' + item.job.payName : '' }}</p>
               <div v-if="item?.job?.hire">
@@ -52,10 +52,10 @@
         <div class="company-info">
           <v-hover>
             <template v-slot:default="{ isHovering, props }">
-              <h3 v-bind="props" v-ellipse-tooltip.top :class="{'default-active': isHovering }" class="title1">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3>
+              <h3 v-bind="props" v-ellipse-tooltip :class="{'default-active': isHovering }" class="title1">{{ formatName(item.enterprise.anotherName || item.enterprise.name) }}</h3>
             </template>
           </v-hover>
-          <p v-ellipse-tooltip.top class="mt-2" style="max-width: 420px;">
+          <p v-ellipse-tooltip class="mt-2" style="max-width: 420px;">
             {{ item.enterprise.scaleName }}
             <span class="mx-2" v-if="item.enterprise.scaleName && item.enterprise.industryName">|</span>
             {{ item.enterprise.industryName }}

src/directives/ellipsisTooltip/index.js

@@ -58,7 +58,7 @@ function calculationLocation(el, target, placements) {
         el.arrowPosition.top = target_dom.height
     } else if (placements === "top") {
         el.tooltipPosition.x = target_dom.x + target_dom.width / 2 - (el_dom?.width || 0) / 2
-        el.tooltipPosition.y = target_dom.y - target_dom.height - 11
+        el.tooltipPosition.y = target_dom.y - target_dom.height - 21
         if (el.tooltipPosition.x > (windowWidth-el_dom.width) && target_dom.left + el_dom.width > windowWidth) {
             el.tooltipPosition.x = windowWidth - el_dom.width
             el.arrowPosition.left = (el_dom.width / 10) * 9
@@ -97,7 +97,7 @@ function dealDomBoundary(el, direction) {
 }
 
 // 方向
-const allPlacements = ['left', 'bottom', 'right', 'top']
+const allPlacements = ['top', 'bottom', 'right', 'left']
 
 
 // function getElStyleAttr(element, attr) {

src/views/recruit/personal/home/components/popularEnterprises.vue

@@ -31,6 +31,7 @@ const getHotEnterpriseList = async () => {
     let jobList = []
     const enterprise = dealDictObjData({}, e.enterprise)
     if (e.jobList && e.jobList.length) jobList = dealDictArrayData([], e.jobList).slice(0, 2)
+    if (enterprise.welfareList?.length) enterprise.welfareTagStr = enterprise.welfareList.map((element, index) => (index === 0 ? element : ('\xa0'.repeat(4)) + element)).join('');
     return { enterprise, jobList, active: false }
   })
 }

src/views/recruit/personal/recommend/components/positionList.vue

@@ -11,7 +11,7 @@
         <div class="job-info">
           <div class="sub-li-top">
             <div class="sub-li-info">
-              <p v-ellipse-tooltip.top :class="['name', {'default-active': item.active }]">{{ formatName(item.name) }}</p>
+              <p v-ellipse-tooltip :class="['name', {'default-active': item.active }]">{{ formatName(item.name) }}</p>
               <svg-icon v-if="item.hire" name="pin" size="30"></svg-icon>
             </div>
           </div>
@@ -40,7 +40,7 @@
               <v-avatar size="35">
                 <v-img :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" />
               </v-avatar>
-              <span v-ellipse-tooltip.top class="names ml-2 font-size-14 ellipsis" style="max-width: 88%;">
+              <span v-ellipse-tooltip class="names ml-2 font-size-14 ellipsis" style="max-width: 88%;">
                 {{ formatName(item.anotherName || item.name) }}
                 <span class="color-999 font-size-13 ml-3">
                   <span>{{ item.industryName }}</span>