Vue+ElementUi动态修改选择器边框颜色

最新推荐文章于 2024-12-12 17:06:49 发布

原创最新推荐文章于 2024-12-12 17:06:49 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

elemenUI 专栏收录该内容

2 篇文章

订阅专栏

方法：利用css var动态生成颜色变量

 <el-select v-model="data"                    
     :style="{'--select-borderColor': data? '#ae4e66':'#9d9d9d'}"
  >
      <el-option v-for="item in list" :key="item.value"      
         :label="item.label"
         :value="item.value">
    </el-option>
 </el-select>

::v-deep .el-select {
                  width: 100px;
                  margin-right: 10px;
                  position: relative;
                  .el-input {
                    input {
                      height: 40px;
                      border-color: var(--select-borderColor);
                      color: #000;   
                    }
                  }
                }