1.鼠标悬停(变小手)
/*鼠标悬停变小手(全局APP.vue)*/
* {
cursor: pointer;
}
2.滚动条样式(全局APP.vue)
::-webkit-scrollbar {
width: 5px;
height: 1px;
}
/* 滑块部分 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgb(133, 130, 134);
cursor: pointer;
}
/* 轨道部分 */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 5px;
cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* ::-webkit-scrollbar {
display: none;
} */
3.局部滚动条样式
.div::-webkit-scrollbar {
width: 5px;
height: 1px;
}
/* 滑块部分 */
.div::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgb(133, 130, 134);
cursor: pointer;
}
/* 轨道部分 */
.div::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 5px;
cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* .div::-webkit-scrollbar {
display: none;
} */
4.文字超出省略,鼠标hover显示
.title {
width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title:hover {
text-overflow: inherit;
overflow: visible;
white-space: nowrap;
}
/*超出两行省略*/
/*.title {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}*/
5.element的表格控制字数使用气泡
<el-table-column label="退回意见" prop="returnSuggestion" align="center" width="200">
<template #default="scope">
<el-popover
v-if="
scope.row.title &&
scope.row.title.length > 20 &&
true
"
placement="top"
width="300"
trigger="hover"
:content="scope.row.title"
>
<p slot="reference">
{{ scope.row.title.slice(0, 20) + "..." }}
</p>
</el-popover>
<p v-else>{{ scope.row.title }}</p>
</template>
</el-table-column>