目录
提前说明注意点:使用deep深度修改时,外面要包一层div,防止更改全局样式比如:
.visitors-container{
::v-deep{
.el-dialog__body{
padding: 0 0 30px 0 ;
}
.el-dialog{
border-radius: 8px;
}
.headHead{
background-color: #FAFAFA;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
}
}
}
或者在style标签上添加scoped属性,以表示它的样式作用于当下的模块,实现样式私有化的目的
<style lang="scss" scoped>
一、表格样式需求:
1、表格表头居中:加上 align="center"即可
<el-table-column
prop="date"
label="日期"
width="180"
align="center">
</el-table-column>
二、弹窗
1、在弹出框中,添加自定义html样式,建议使用Dialog 对话框
<!-- 新增弹框 -->
<el-dialog
title="标签设置"
width="25%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="showDialog"
@close="cancleAddRoles"
>
<div class="labelSettings">
<el-input style="width:340px; height:32px;" v-model="input" placeholder="添加新的标签"></el-input>
<img style="width:32px; height:32px" src="@/assets/image/addlabel.png" alt="">
</div>
</el-dialog>
。。。
data() {
return {
showDialog: false, // 控制弹框的隐藏和展示
}
。。。
methods: {
// 逻辑
Setlabel(){
// 判断是否勾选用户
if (this.multipleSelection.length == 0) {
this.$message('请勾选需要操作的人员')
return
}
// 开启弹窗
this.showDialog = true
}
}
2、对话框修改为圆角
::v-deep .el-dialog{
border-radius: 8px;
}
3、修改文字标题样式:
<el-dialog title="replace" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<template slot='title'>
<span style="font-size:14px;font-weight:700">原始资源库</span>
</template>
</el-dialog>
4、Select 选择器
要改选中颜色,但是 .el-select-dropdown__item.selected 类名不好使,解决方法
<el-select placeholder="请选择" :popper-append-to-body="false">
...
</<el-select>
。。。。。。
::v-deep .el-select-dropdown__item.selected{
color: #149f97;
}
5、更改选择器样式
// 将光标去掉
.model-box{
::v-deep .el-input__inner{
cursor:pointer;
caret-color:transparent;
}
}
// 型号选项弹窗
.ModelOptionsBox{
position: absolute;
top: 243px;
left: 50px;
background-color: #fff;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
width: 350px;
min-height: 40px;
// 最上面的添加与搜索选项
.addModel{
width: 350px;
height: 40px;
background: rgba(232,41,41,0.06);
z-index: 2035;
.left{
width: 16px;
height: 16px;
position: absolute;
left: 15px;
top: 12px;
}
.center{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E82929;
position: absolute;
top: 10px;
left: 39px;
}
.right{
width: 16px;
height: 16px;
position: absolute;
top: 13px;
right: 15px;
}
}
}
三、小功能
1、输入框 el-input 调整高度,可以用size调整
<el-input size="small" style="width:340px; height:32px;" v-model="input" placeholder="添加新的标签"></el-input>
2、hr 修改样式
hr{
background-color: #E9E9E9;
height: 1px;
border: none;
}
3、将整个背景设置颜色
可以用最小高度
.main {
min-height: calc(100vh - 0px);
width: 100%;
background: #f1f2f6;
}
4、el-input 组件绑定事件
直接添加是无效的,需要使用使用 v-on 的修饰符.native,@click.native
<el-input v-model="ruleForm.region" placeholder="请选择" style="width:350px;" @click.native="modelInput"></el-input>