Vue示例之CSS照片图片上显示选框

方法一：效果图

显示选框

Html标签

 <div class="container">
      <img src="@/assets/image1.jpg" width="110px" height="100px" />
      <input type="checkbox" class="checkbox" id="check1" />
    </div>
    <div class="container">
      <img src="@/assets/image2.jpg" width="110px" height="100px" />
      <input type="checkbox" class="checkbox" id="check2" />
    </div>

Css样式

 .container {
      position: relative;
      width: 100px;
      height: 100px;
      float: left;
      margin-left: 10px;
    }

    .checkbox {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }

方法二：效果图

使用全选框

使用ElementUI组件

   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">
        <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          :fit="fit">
        </el-image>
      </el-checkbox>
    </el-checkbox-group>

export default {
    data() {
      return {
        checkAll: false,
      }
    }
}