在vue3中使用elementPlus的el-select时样式穿透问题
  xaeiTka4h8LY 2024年08月02日 67 0

下拉框的option样式只能在全局样式里改,千万不能用scope,否则不生效

<el-select 
    class="select" 
    :popper-append-to-body="false" 
    v-model="selectValue" 
    placeholder="请选择"
     popper-class="select-option">
      <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value">
      </el-option>
</el-select>


<style lang="scss">
    .select-option{
      background-color: rgba(37, 37, 41, 0);
      border-radius: 0;
      border: 1px solid rgba(50, 50, 59, 1);
    }
    .el-select-dropdown__item.selected {
      font-size: 14px;
      font-weight: 400;
      background-color: rgba(22, 22, 27, 1);
      color: #eea635 !important;
    }
    .el-select-dropdown__item.active{
      background-color: rgba(37, 37, 41, 1);
    }

    /* 消除小三角 */
    .el-popper[x-placement^=bottom] .popper__arrow{
      border: none;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
      border: none;
    }
    .el-popper[x-placement^=bottom]{
      margin-top: 0;
    }

</style>
    .select{
      width: 110px;
      height: 22px;
      background-color: rgba(0,0,0,0);
    }


              <el-select
                class="select"
                :popper-append-to-body="false"
                v-model="selectValue"
                placeholder="请选择"
                popper-class="select-option"
               >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>


/deep/ .el-input__inner{
  background-color: rgba(0,0,0,0);
  border-radius: 0px;
  border: 1px solid rgba(22, 22, 27, 1);
  height: auto;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.65);
}
/deep/ .el-input__icon{
  line-height: 22px;
}
/deep/ .el-select .el-input.is-focus .el-input__inner{
  border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
  border-color: rgba(238, 166, 53, 1);
}、
/deep/ .el-select .el-input.is-focus .el-input__inner{
  border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
  border-color: rgba(238, 166, 53, 1);
}

改完之后样式如图:

在vue3中使用elementPlus的el-select时样式穿透问题

基本上所有样式都改了,如果是大佬建议直接自己写个封起来。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年08月02日 0

暂无评论

xaeiTka4h8LY