23/04/04前端开发

1 修改element vue2 el-radio和el-checkbox的字体颜色

<style scoped>
/**只在该组件使用这个样式 scoped
>>>是vues深度样式选择器，当加上各种权重和!important时，样式不改变就可以使用>>>
使用>>>时需要scoped限制局部使用样式，不污染全局样式，vue在编译时在元素上加
[data-v-217d514b]属性确保只是本组件元素使用该样式*/
.component-class-name >>>.el-radio__input.is-checked .el-radio__inner {
    border-color: pink;
    background: pink;
}
component-class-name >>>.el-radio__inner:hover {
    border-color: pink;
}
.component-class-name >>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: pink;
}
.component-class-name >>>.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color:pink;
    border-color: pink;
}
.component-class-name >>>.el-checkbox__inner:hover {
    border-color:pink;
}
<style>

学习深度选择器来源:关于深度作用选择器 Vue style 深度作用选择器
只作用于css深度作用选择器

1. style scoped限制
2. ::v-deep与>>>与/deep/
3. 在Sass或less需要使用/deep/

2去除element button 按钮点击后出现黑色边框

button {outline:none;} /* 去除按钮黑色边框*/
button:focus {outline:none;} /*IE、Chrome*/
button::-moz-focus_inner {border-color:transparent;} /*Firefox*/

3 git 提示hint: Updates were rejected because the tip of your current branch is behind

更新被拒绝，因为你当前分支的提示落后了
先同步远程的代码

git  fecth origin
git merge origin
git push

一般提交代码步骤

1. git gui here
2. 重新扫描
3. 缓存改动
4. 签名
5. 提交
6. 有远程版本代码的，先同步远程代码
7. 上传

4 vue 动态添加类名

三元表达式、数组、对象

<div :class="isRequired ==true ? redStar: ' ' "></div>
<div :class="[pink-bgc,{'font-blod': isRequired,'border-bottom': true,}]"></div>
<div :class="{'font-blod': isRequired,'border-bottom': true,}"></div>

5单选框多选框input label

input 的id属性值要与label的for属性值一致，才能达到点击label中的文字，鼠标聚焦到input框

<input type="radio" id="cli" value="climb" name="sport"> 
<label for="cli">爬山</laebl>
<input type="radio" id="sle" value="sleep" name="sport"> 
<label for="sle">睡觉</laebl>

6 flex布局换行

flex-warp:wrap;
justify-content:space-around;
```

# 7 css calc函数
calc()动态计算的元素长度值
运算符左右一个空格
支持+-*/
````css
width: calc(100vw - 1rem)