UI-详情超出字数显示tips

src/assets/styles/base.scss

@@ -231,6 +231,7 @@ ul {
   height: 100vh;
 }
 
+
  //超图气泡
  .leaflet-popup-content-wrapper {
   // padding: 15px 20px !important;

src/filters.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+
+//---------------------------------字数长度
+
+Vue.filter('ellipsisFont6',(value) => { //字数长度6
+    if (!value) return "";
+    if (value.length > 6) {
+      return value.slice(0, 6) + "...";
+    }
+    return value;
+})
+
+Vue.filter('ellipsisFont8',(value) => { //字数长度8
+    if (!value) return "";
+    if (value.length > 8) {
+      return value.slice(0, 8) + "...";
+    }
+    return value;
+})

src/main.js

@@ -28,6 +28,9 @@ import './permission' // permission control
 //DataV动效组件
 import dataV from '@jiaminghi/data-view'
 
+//公共过滤器 
+import './filters'
+
 // //WebSocket封装方法
 // import * as socketApi from '@/api/socket'
 // Vue.prototype.socketApi = socketApi

src/views/eventdetailsdialog.vue

@@ -19,7 +19,19 @@
                   <div class="dia-left-top-carousel">
                     <el-carousel height="30px" direction="vertical" :interval="2000">
                       <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
-                        <a :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
+                        <el-tooltip 
+                        placement="top" 
+                        popper-class="js-tps" 
+                        :visible-arrow="visuForestCloudYuAnBo.reserveName.length>6" 
+                  >
+                  <div slot="content" class="leader-info-container">
+                    <div class="leader-info-list-con" v-show="visuForestCloudYuAnBo.reserveName.length>6">
+                      <h4>{{ visuForestCloudYuAnBo.reserveName }}</h4>
+                    </div>
+                  </div>
+                  <a :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName | ellipsisFont6 }}</a>
+                </el-tooltip>
+                        <!-- <a :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName | ellipsisFont6 }}</a> -->
                       </el-carousel-item>
                       <el-carousel-item v-else>
                         <a href="#">暂未关联预案</a>