add tooltip

src/components/Camera/index.vue

@@ -14,17 +14,23 @@
     >
       <div :class="{item:true,active:currentCameraId === item.cameraId}">
         <div class="item-name">
-          <Icon name="camera" iconClass="icon-camera" />
-          <!-- <el-popover
-            placement="top-start"
-            title="标题"
-            width="200"
-            trigger="hover"
-            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
-          >
-            <el-button slot="reference">hover 激活</el-button>
-          </el-popover>-->
-          <span>{{ handleCameraName(item.cameraName)}}</span>
+          <div class="item-name-icon">
+            <Icon name="camera" iconClass="icon-camera" />
+          </div>
+          <div class="item-name-title">
+            <span v-if="!item.cameraName || item.cameraName.length<=14">{{item.cameraName}}</span>
+            <span>
+              {{handleCameraName(item.cameraName)}}
+              <el-tooltip
+                v-if="item.cameraName && item.cameraName.length>14"
+                effect="dark"
+                :content="item.cameraName"
+                placement="top-start"
+              >
+                <el-button>...</el-button>
+              </el-tooltip>
+            </span>
+          </div>
         </div>
         <div class="item-total">
           <span>{{ item.number }}</span>
@@ -57,15 +63,15 @@ export default class Camera extends BaseVue {
   }
 
   handleCameraName(name: string) {
-    if (name && name.length > 14) {
-      return name.substr(0, 14) + "...";
+    if (name && name.length > 12) {
+      return name.substr(0, 12);
     }
     return name;
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .area-camera {
   margin-top: 15px;
   // border: 1px solid red;
@@ -100,8 +106,15 @@ export default class Camera extends BaseVue {
     padding-left: 40px;
     padding-right: 10px;
     .item-name {
+      display: flex;
       height: 35px;
       line-height: 35px;
+      .item-name-icon {
+        width: 24px;
+      }
+      .item-name-title {
+        flex: 1;
+      }
     }
     .item-total {
       display: flex;
@@ -124,5 +137,17 @@ export default class Camera extends BaseVue {
       padding-right: 10px;
     }
   }
+  ::v-deep {
+    .el-button {
+      padding: 0;
+      height: 35px;
+      line-height: 35px;
+      font-size: 14px;
+      color: #d7d7d7;
+      background: transparent;
+      border: 0;
+      margin: 0;
+    }
+  }
 }
 </style>

src/main.ts

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "@/utils/rem";
-import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Popover } from 'element-ui';
+import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Tooltip } from 'element-ui';
 
 Vue.config.productionTip = false;
 
@@ -19,7 +19,7 @@ Vue.use(Pagination);
 Vue.use(DatePicker)
 Vue.use(Loading);
 Vue.use(Empty)
-Vue.use(Popover)
+Vue.use(Tooltip)
 
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$message = Message;