简单使用：class根据按钮状态高亮

最新推荐文章于 2024-01-19 15:06:36 发布

xiaoming_0208

最新推荐文章于 2024-01-19 15:06:36 发布

阅读量125

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/xiaoming4965/article/details/134989127

版权

:class="{ 'highlighted': coalDisabled }"

:disabled="petroleumDisabled"

 <div class="botton">
      <el-button @click="click('coal')" :disabled="coalDisabled" :class="{ 'highlighted': coalDisabled }">
        <img src="../../../assets/homeImgs/homePages3/left.png" alt="" style="width:35px; height:35px;">
      </el-button>
      <el-button @click="click('petroleum')" :disabled="petroleumDisabled" :class="{ 'highlighted': petroleumDisabled }">
        <img src="../../../assets/homeImgs/homePages3/right.png" alt="" style="width: 35px; height:35px;">
      </el-button>
    </div>

const coalDisabled = ref(true)

const petroleumDisabled = ref(false)

/* 设置高亮时的背景色 */

.highlighted {

background-color: rgba(85, 87, 91, 0.9);

}