Commit bafd1f2c authored by 朱松文's avatar 朱松文

add tooltip

parent b662a00d
......@@ -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>
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment