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 slot-scope="scope"><el-popoverv-if="scope.row.title && scope.row.title.length > 20 && scope.row.title != null"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>