目录
6.模板中使用 :class三元判断技巧
7.兼容性-360浏览器中justify-content: right;失效
8.css rgba()中使用变量控制透明度
1.svg图片如何修改颜色
svg举例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20" height="20" viewBox="0 0 20 20"><clipPath id="master_svg_0"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath><g clip-path="url(#master_svg_0)"><g><path d="M3.3333331525878904,16.666664123535156L3.3333331525878904,11.666664123535156C3.3333331525878904,7.9847641235351565,6.31810015258789,4.999994123535156,10.00000015258789,4.999994123535156C13.681900152587891,4.999994123535156,16.666700152587893,7.9847641235351565,16.666700152587893,11.666664123535156L16.666700152587893,16.666664123535156L17.50000015258789,16.666664123535156L17.50000015258789,18.333364123535155L2.5000001525878908,18.333364123535155L2.5000001525878908,16.666664123535156L3.3333331525878904,16.666664123535156ZM5.000000152587891,16.666664123535156L15.00000015258789,16.666664123535156L15.00000015258789,11.666664123535156C15.00000015258789,8.905244123535155,12.76140015258789,6.666664123535156,10.00000015258789,6.666664123535156C7.238580152587891,6.666664123535156,5.000000152587891,8.905244123535155,5.000000152587891,11.666664123535156L5.000000152587891,16.666664123535156ZM9.16667015258789,1.6666641235351562L10.833330152587891,1.6666641235351562L10.833330152587891,4.166664123535156L9.16667015258789,4.166664123535156L9.16667015258789,1.6666641235351562ZM16.48170015258789,4.006664123535156L17.66000015258789,5.184994123535157L15.89330015258789,6.952494123535156L14.71420015258789,5.774164123535156L16.48170015258789,4.006664123535156M2.3400001525878906,5.184994123535157L3.5183301525878905,4.006664123535156L5.285830152587891,5.7733341235351565L4.10833015258789,6.953334123535156L2.3400001525878906,5.184994123535157ZM5.833330152587891,11.666664123535156C5.833330152587891,9.365474123535156,7.698810152587891,7.499994123535156,10.00000015258789,7.499994123535156L10.00000015258789,9.166664123535156C8.61929015258789,9.166664123535156,7.500000152587891,10.285954123535156,7.500000152587891,11.666664123535156L5.833330152587891,11.666664123535156Z" fill-opacity="1"/></g></g></svg>
删除标签上的fill，一共删除2个
扫描二维码关注公众号，回复：
14222590 查看本文章
将他看作普通的标签即可
fill="none" fill="#000000"
2.整体修改elementUI的组件样式
比如说我想让项目所有的输入框尺寸缩小，可以设置样式让全局生效，但是容易导致其他的组件也变化。推荐做法是，给我们要改的地方加个单独的父类名，这样就选不到其他地方了。
3.水平垂直居中flex方式
flex已经被更多的浏览器兼容，比起定位啊以及其他方式，不关你是什么元素，通通搞定。
使用flex:
display:flex; justify-content: center;//水平居中 align-items: center;//垂直居中
4.登录页背景图自适应屏幕不出现滚动条
min-height: 100%;
width: 100%;
overflow: hidden;
background-image: url("~@/assets//common/bjlogo.png"); // 设置背景图片
background-position: center; //从中间开始渲染
background-size: cover;// 将图片位置设置为充满整个屏幕
background-repeat: no-repeat;//不平铺
几种方式：
1.background-size: 100% 100%;图片容易变形
2.background-size: 100% auto;比第一种好一些，但是随着屏幕变化会出现留白
3.background-size: contain;保持图片的宽高比例，不会变形，但是有可能导致留白
4.background-size: cover;相对来说比较好的方式，不会变形，不会留白，有可能导致图片显示不完全。
5.退出功能-通用
基于elementUI:
logout () {
this.$confirm('你确定要离开吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'confirm-p'//注意：这里是自己设置类名，然后就可以通过类名任意修改样式了
}).then(async () => {
// 清空本地信息
await this.$store.dispatch('user/userLogout')
// 回去登录页
const curPath = encodeURIComponent(this.$route.fullPath)
this.$router.push('/login?return_url=' + curPath)
}).catch(() => {
})
}
6. <template>模板中使用 :class三元判断技巧
使用三元进行二次判断容易导致代码混乱（看着乱）可以使用：class+：style结合使用，这样代码比较清晰
7.兼容性-360浏览器中justify-content: right;失效
只需要将right改为flex-end即可
8.css rgba()中使用变量控制透明度
//用法一：设置随机颜色
:style="{backgroundColor:`rgba(${getRandomColor().ran},${getRandomColor().ran2},${getRandomColor().ran3},1`}"
//用法2：js控制颜色的透明度
template中：
<el-button
type="warning"
plain
class="btnHover"
style="
background: #fff;
font-weight: 600;
"
:style="{
color: `rgba(243, 95, 40, ${alpha}`,
border: `1px solid rgba(243, 95, 40, ${alpha}`,
}"
@click="del2"
>删除</el-button
>
data定义： alpha:0.5 //初始值给0.5
js……略