【22年-4月开发日记】vue实际项目中遇到的问题及解决整理

红太狼 2023-09-29 12:30 6阅读 0赞

**目录**

1.svg图片如何修改颜色

2.整体修改elementUI的组件样式

3.水平垂直居中flex方式

4.登录页背景图自适应屏幕不出现滚动条

5.退出功能-通用

6.模板中使用 :class三元判断技巧

7.兼容性-360浏览器中justify-content: right;失效

8.css rgba()中使用变量控制透明度

--------------------

### 1.svg图片如何修改颜色 ###

svg举例：

删除标签上的fill，一共删除2个

将他看作普通的标签即可

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……略