type=number美化
某些情况我们需要设置el-input的type=‘number’,会有上下箭头,很丑:
美化代码如下:
// 隐藏type=number箭头
.el-input__inner::-webkit-outer-spin-button,
.el-input__inner::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.el-input {
-moz-appearance: textfield;
}
.el-input input[type="number"] {
-moz-appearance: textfield;
}
表单只有一项时,按回车键会刷新页面
在el-form
中添加@submit.native.prevent
滚动条美化
默认的滚动条又粗又丑,美化代码如下:
/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: rgba(0,0,0,.2);
}
/*定义滚动条轨道
内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px transparent;
border-radius:10px;
background-color:#F5F5F5;
}
/*定义滑块
内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.2);
background-color: #b3b3b3;
}
el-table最后一列固定列,出现横线遮挡的问题
最后一列为固定列,某些情况下按钮只显示一半高度(暂无截图)
::v-deep {
.el-table__fixed-right {
height: 100% !important;
}
}