vue 手写颜色Div选中效果

最新推荐文章于 2023-08-08 15:44:52 发布

七彩猫猫虫

最新推荐文章于 2023-08-08 15:44:52 发布

阅读量452

点赞数

分类专栏：工作中的小问题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/SDAW_1/article/details/127225894

版权

工作中的小问题专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html:

<div class="colorTag" v-for="(item,index) in predefineColors" :key="item">
            <div
              class="eachColor"
              :style="{ background: item}"
              @click="choseColor(index)"
            >
              <div class="gou" v-show="show[index]">
                <img src="@/assets/images/gou.png" alt="" />
              </div>
            </div>
          </div>

css:

.colorTag {
  display: inline-block;
  /* display: flex;
  flex-direction: row; */
}
.colorTag .eachColor {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  position: relative;
  border-radius: 5px;
}
.colorTag .eachColor:hover {
  cursor: pointer;
}
.colorTag .gou {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 6px;
  left: 7px;
}

js：

//定义data:
show:[false,false,false,false,false,false,false,false],
      predefineColors: [
        "rgb(228,111,81)",
        "rgb(255,203,68)",
        "rgb(106,191,64)",
        "rgb(61,150,255)",
        "rgb(1,218,223)",
        "rgb(183,105,243)",
        "rgb(93,91,218)",
        "rgb(180,76,94)",
      ],
//主要方法
 choseColor(val) {
      console.log(val, "选中的");
      this.show = [false,false,false,false,false,false,false,false]
      this.show[val] = true
      this.statusForm.color = this.predefineColors[val]
      // const a = this.predefineColors.indexOf(val)
      // console.log(a,'位置')
    },