vue开关灯效果,点击切换显示不同背景色

xx820702

已于 2022-05-25 09:47:38 修改

阅读量1.7k

点赞数

分类专栏： vue2 文章标签： vue.js elementui javascript

于 2022-05-25 09:20:55 首次发布

本文链接：https://blog.csdn.net/xx820702/article/details/124959590

版权

vue2 专栏收录该内容

63 篇文章 1 订阅

订阅专栏

<el-button class="selectall" :style="activeall"  type="info" @click="selectall">全选菜单</el-button>
 <span class="gou" :style="activegou" @click="selectall"><i :style="activen" class="el-icon-check"></i></span>



data(){
  return:{
     activeall: "",
      activegou: "",
      activen: "",
      v: true,
}
},
methods:{
     selectall() {
      if (this.v == true) {
        this.activeall = "background-color:rgb(64,158,255);";
        this.activegou = "border:1px solid rgb(64,158,255); border-left:none;border-radius: 4px;";
        this.activen = "color:rgb(64,158,255); ";
        this.v = false;
      } else {
        this.activeall = "";
        this.activegou = "";
        this.activen = "";
        this.v = true;
      }
    },
}



 .selectall {
        background-color: rgb(210, 210, 210);
        border: transparent;
        color: #fff;
        font-size: 16px;
      }
      .gou {
        width: 35px;
        height: 40px;
        margin-right: 10px;
        border: 1px solid rgb(235, 235, 235);
        border-left: none;
        .el-icon-check {
          font-size: 34px;
          color: rgb(194, 194, 200);
        }
      }
    }