用vue实现多选框单选，全选和删除_vue3 input checkout实现多选

原文链接：https://www.jianshu.com/p/0c00c2c47f41

原文链接：https://www.jianshu.com/p/0c00c2c47f41

原文链接：https://www.jianshu.com/p/0c00c2c47f41

包含功能：

• 单选
• 多选
• 全选
• 批量删除

实现原理：

• fruits：决定显示元素的多少，所以，对元素增删改查都操作它
• fruitIds： 通过对数组的增删改查，控制元素选中与否
• isCheckedAll： 判断是否全选，如果全选，就把数组fruits中的id都添加给fruitIds

注意事项：

1、全选框中，:checked="fruits.length===fruitIds.length && fruitIds.length"的处理，是为了防止 数据和fruitIds都为空，却全选选中的情况
2、如果需要封装成组件，请把变量设置为属性props，把事件通过$.emit发射到父级
3、真正开发中，这里要用到vuex,axios处理真实数据

<template>
  <div>
    <input type="checkbox"
           class="input-checkbox"
           :checked="fruits.length===fruitIds.length && fruitIds.length"
           @click="checkedAll" />
    <label>全选</label>
    <div v-for="fruite in fruits"
         :key="fruite.id"
         class="fruiteList">
      <input type="checkbox"
             :checked="fruitIds.indexOf(fruite.id)>=0"
             name="checkboxinput"
             class="input-checkbox"
             @click="checkedOne(fruite.id)">
      <label>{{fruite.value}}</label>
    </div>
    <button @click="deleteSome">Delete</button>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      fruits: [{
        id: '1',
        value: '苹果'
      }, {
        id: '2',
        value: '荔枝'
      }, {
        id: '3',
        value: '香蕉'
      }, {
        id: '4',
        value: '火龙果'
      }],
      fruitIds: ['1', '3', '4'],
      // 初始化全选按钮, 默认不选
      isCheckedAll: false
    }
  },
  methods: {
    checkedOne (fruitId) {
      let idIndex = this.fruitIds.indexOf(fruitId)
      if (idIndex >= 0) {//如果已经包含就去除
        this.fruitIds.splice(idIndex, 1)
      } else {//如果没有包含就添加
        this.fruitIds.push(fruitId)
      }
    },
    checkedAll (e) {
      this.isCheckedAll = e.target.checked;
      if (this.isCheckedAll) {//全选时
        this.fruitIds = []
        this.fruits.forEach(item => {
          this.fruitIds.push(item.id)
        })
      } else {
        this.fruitIds = []
      }
    },
    deleteSome () {
      this.fruits = this.fruits.filter(item => this.fruitIds.indexOf(item.id) === -1)
      this.fruitIds = []
    }
  }
}
</script>
<style scoped lang="scss">
.input-checkbox {
  width: 40px;
  height: 40px;
  -webkit-appearance: none;
  position: absolute;
  outline: none;
  border: none;
  &::after {
    left: 0;
    top: 0;
    content: url("../assets/images/round.svg");
  }
  &:checked:after {
    left: 0;
    top: 0;
    content: url("../assets/images/done.svg");
  }
}
label {
  padding-left: 50px;
  height: 40px;
  line-height: 45px;
}
</style>

关于伪类元素不能修改宽高的问题

原文链接：https://blog.csdn.net/qq_27064559/article/details/83620479
:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的
就像你对a元素设置width/height一样

你可以把图片设为背景图片，通过bakckground-size来设置大小

#center_box:before{
content:’’;
background-image:url(http://localhost/quding/photos/u14.png);
background-size:1000px 200px;
position: absolute;
width:1000px;
height:200px;
z-index: 100;
top: -110px;
}