1、隐藏滚动条
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-track {
background-color: none;
}
::-webkit-scrollbar-thumb {
background-color: none;
}
::-webkit-scrollbar-thumb:hover {
background-color: none;
}
::-webkit-scrollbar-thumb:active {
background-color: none;
}// 企业微信内置浏览器x轴滚动条样式删除
::v-deep ::-webkit-scrollbar {
height: 0px !important;
}
2、数据有多空格仅显示一个时,需要文本多空格显示
white-space: pre
//vue表格默认不显示空格,需要多空格显示
::v-deep .cell.el-tooltip {
white-space: pre !important
}
3、vue多行文本输入框右下角长度输入遮挡输入区域
// textarea右下角数字遮挡优化
::v-deep.el-textarea {
height: 110px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
::v-deep.el-textarea .el-input__count {
height: 12px;
line-height: 12px;
position: absolute;
background: rgba(255, 255, 255, .8)
}
::v-deep.el-textarea textarea {
height: 90px !important;
border: none !important;
}
4、vue多行文本textarea保留输入格式
::v-deep .el-textarea.el-input--medium textarea {
white-space: pre-wrap !important; //保留所有空格
font-family: inherit !important; //统一文本样式
}
5、vue 多行文本textarea输入后仅做回显(样式与输入保持一致)
word-wrap: break-word; //强制换行
white-space: pre-wrap; //不会合并换行符和空格符
word-break: break-all; //内容超出容器换行