「已注销」
2021-06-04 10:24
采纳率: 71.4%
浏览 424
已采纳

vue 勾选v-for循环渲染的div

点击一个实现单选或多个div实现多选右上角出现打钩的图标,再返回id需要怎么实现

<template>
  <div style="margin: 0 150px">
    <a-row :gutter="[16,16]">
      <a-col :span="6" v-for="csName in clasData">
        <a-checkbox style="width: 300px">
          <div class="pat-wrap" >
            <!--            背景图部分-->
            <div>
              <img class="pat-img">
            </div>
            <!--            遮罩部分-->
            <a-row class="pat-shade" >
              <a-col :span="24">
                <p>{{csName.name}}</p>
              </a-col>

              <a-col :span="24">
                <div >
                  <div class="pat-shade-div" v-for="cName in classData">
                    <IconFont type="iconjiantou1"></IconFont>
                    <p>{{cName.name}}</p>
                  </div>
                </div>
              </a-col>

              <a-col :span="24">
                <div class="pat-shade-div" style="width: 45%">
                  <p>50-500人</p>
                </div>
                <div class="pat-shade-div" style="width: 45%">
                  <p>已选:3人</p>
                </div>
              </a-col>

              <a-col :span="24">
                <div style="color: #17C295;display: inline-block;margin-right: 10px">查看</div>|
                <div style="color: #0098F8;display: inline-block;margin-left: 10px;margin-right: 10px" >编辑</div>|
                <div style="color: #FC8950;display: inline-block;margin-left: 10px;">删除</div>
              </a-col>

            </a-row>

          </div>
        </a-checkbox>

      </a-col>
    </a-row>
  </div>
</template>
<script>
export default{
  data(){
    return{
      classData: [
        { id: 1, name: '测试' },
        { id: 2, name: '测试' },
        { id: 3, name: '测试' },
        { id: 4, name: '测试' },
        { id: 5, name: '测试' },
        { id: 6, name: '测试' },
      ],
      clasData: [
        { id: 1, name: '模式一' },
        { id: 2, name: '模式二' },
        { id: 3, name: '模式三' },
        { id: 4, name: '模式四' },
        { id: 5, name: '模式五' },
        { id: 6, name: '模式六' }
      ],
    }
  }
}
</script>
<style>
.pat-div-img{
  width: 30%;
  height: 150px;
  background-color: antiquewhite;
}
.pat-img{
  width: 100%;
  height: 180px;
  z-index: 1;
}
.pat-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.pat-shade {
  position: absolute;
  width: 100%;
  bottom: -35px;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: bottom ease-out .2s;
  color: #FFFFFF;
  text-align: center;
}
.pat-wrap:hover .pat-shade {
  bottom: 0;
}
.pat-shade IconFont{
  display: inline-block;
}
.pat-shade p{
  display: inline-block;
  margin-bottom: 0;
}
.pat-shade-div{
  display: inline-block;
  margin: 0 5px;
}
</style>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题