【css】vue專案深度作用選擇器（scoped）

阿新 • • 發佈：2022-05-18

scoped 修飾的style只給當前元件內的元素使用
本質：
1.給當前元件中的所有元素，新增一個隨機的屬性
2.給當前元件中的所有元素的樣式新增一個對應的隨機屬性選擇器

描述：

場景：按照設計圖，修改select選擇器的樣式

設計圖效果

html

<el-select class="el-select-box"
    v-model="sortStatus"
    @change="handleStatus">
        <el-option v-for="item in items" 
            :key="item.index" 
 
            :label="item.text" 
            :value="item.index"></el-option>
</el-select>

css:

<style lang="scss" >
//select 下拉css
.el-select-dropdown{
    top:557px;
    .el-select-dropdown__item.selected:after{
      position: absolute;
      right: 20px;
      font-family: element-icons 
;
      content: "";
      font-size: 12px;
      font-weight: 700;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .el-select-dropdown__item{
      width: 108px;
      height: 30px;
      color:#666;
    }
}

.ranking-top {
    width: 100%;
    height: 50px;
    padding 
: 0 20px;
    border-bottom: 1px solid #f4f3f8;
    .el-select{
        width:98px!important;
        .el-input__inner{
            font-size:14px;
            font-weight: bold;
            line-height:28px;
            border:none;

        }
        .el-input__icon{
            line-height: 28px;
        }
    }
}
</style>

方案一：不加scoped

效果圖（正是想要的效果）

ps: 由於select的下拉框是直接在body中的，為了修改下拉框的css,需要加一個scoped

方案二：加上scoped,select 的css失效啦

效果圖（非想要效果）

解決方案：.ranking-top 前面加上一個::v-deep

最終方案：

1、使用深度作用選擇器::v-deep

2、使用popper-append-to-body屬性，修改彈出層的插入位置注意，該屬性值為boolean型別

html

<el-select class="el-select-box"
    :popper-append-to-body="false"
    v-model="sortStatus"
    @change="handleStatus">
        <el-option v-for="item in items" 
            :key="item.index" 
            :label="item.text" 
            :value="item.index"></el-option>
</el-select>

css

<style lang="scss" scoped>
::v-deep .ranking-top {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f4f3f8;
    .el-select{
        width:98px!important;
        .el-input__inner{
            font-size:14px;
            font-weight: bold;
            line-height:28px;
            border:none;

        }
        .el-input__icon{
            line-height: 28px;
        }
        //select 下拉css
        .el-select-dropdown{
            top:557px;
            .el-select-dropdown__item.selected:after{
                position: absolute;
                right: 20px;
                font-family: element-icons;
                content: "";
                font-size: 12px;
                font-weight: 700;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            .el-select-dropdown__item{
                width: 108px;
                height: 30px;
                color:#666;
            }
        }

    }
}
</style>