vue中單選框與多選框的實現與美化

我們在做一些頁面時，可能會用到很多的單選框和復選框，但是原生的radio和checkbox前面的原型圖標或方框樣式不盡人意。於是，決定自己來實現單選框和復選框。我用的是vue，所以就用vue的方式實現單選和復選框。

下面來看一下單選框的實現：

template

        <!-- 單選框 -->
        <span class="selfRadio" @click="clickRadio(1)">
            <span class="selfRadioImgBox">
                <img v-show="radioVal==1" src="../assets/img/checked.png" alt="選中圖標">
                <img v-show="radioVal!=1" src="../assets/img/noCheck.png" alt="未選中圖標">
            </span>
            單選框
        </span>
        <span class="selfRadio" @click="clickRadio(2)">
            <span class="selfRadioImgBox">
                <img v-show="radioVal==2" src="../assets/img/checked.png" alt="選中圖標">
                <img v-show="radioVal!=2" src="../assets/img/noCheck.png" alt="未選中圖標">
            </span>
            單選框
        </span>

style

        .selfRadio{
            cursor: pointer;
            .selfRadioImgBox img{
                width:18px;
                height:18px;
            }
            .selfRadioText{
                margin-left:10px;
            }
        }

data

        radioVal:0,

 

methods

        clickRadio(val){
            if(this.radioVal==val){
                this.radioVal=0;
            }else{
                this.radioVal=val;
            }
        }

單選框的實現，主體思想是，我們自己選兩張圖片，用v-show來控制其顯示或隱藏，這樣達到與單選框一樣的效果，而且選擇框可以根據自己的意願來換。

 

 

 下面來看一下多選框的實現：

data：

        checkBoxArr:[
                {
                    text:'多選框1',
                    selectStatus:0
                },
                {
                    text:'多選框2',
                    selectStatus:0
                }
            ]

template

        <!-- 多選框 -->
        <span class="selfCheckBox" @click="clickCheckBox(index)" v-for="( item,index) in checkBoxArr" :key="index">
            <span class="selfCkeckImgBox">
                <img v-show="item.selectStatus==1" src="../assets/img/checked.png" alt="選中圖標">
                <img v-show="item.selectStatus==0" src="../assets/img/noCheck.png" alt="未選中圖標">
            </span>
            <span class="checkBoxText">
                {{ item.text }}
            </span>
        </span>

style

        .selfCheckBox{
            cursor: pointer;
            .selfCkeckImgBox img{
                width:30px;
                height:30px;
            }
            .checkBoxText{
                margin-left:10px;
            }
        }

methods

        clickCheckBox(index){
            if(this.checkBoxArr[index].selectStatus==1){
                this.checkBoxArr[index].selectStatus=0;
            }else{
                this.checkBoxArr[index].selectStatus=1
            }
        }

多選框，控制選擇框的樣式切換，和單選框是一樣的原理，但是單選框只能選一個，而多選框可以選多個，所以在實現多選框時，我們將每個多選框里面都加了個selectStatus屬性，用來表示，每個多選框的選中狀態。

 

 

補充一條：選中樣式圖片與未選中樣式圖片，可以自己找，可以去ali圖庫里下載，想用啥用啥。

 

下面是將bootstrap與單復選框結合起來的使用方式，響應式，美化選擇框

<template>
  <div>
    <!-- 單選框 -->
    <div class="row">
      <div v-for="(item,index) in radioList" :key="index" class="col col-xs-12 col-sm-6 col-md-4">
        <input v-show="false" type="radio" name="gender" :value="item.value" :id="item.value" :checked="sex==item.value" @click="clickRadio(item.value)" />
        <label :for="item.value">
          <div class="imgBox">
            <img v-show="sex==item.value" src="../../assets/checked.png" alt="選中">
            <img v-show="sex!=item.value" src="../../assets/noCheck.png" alt="未選中">
          </div>
          {{item.label}}
        </label>
      </div>
    </div>

    <input type="text" v-model="sex">


    <hr>


    <!-- 復選框 -->
    <div class="row">
      <div v-for="item in checkBoxList" :key="item.value" class="col col-xs-12 col-sm-6 col-md-4">
        <label>
          <div class="imgBox">
              <img v-show="fruit.includes(item.value)" src="../../assets/checked.png" alt="選中">
              <img v-show="!fruit.includes(item.value)" src="../../assets/noCheck.png" alt="未選中">
            </div>
          <input v-show="false" @click="clickCheckBox(item.value)" name="Fruit" type="checkbox" :value="item.value" :checked="fruit.includes(item.value)" />
          {{item.label}} 
        </label>
      </div>
    </div>


    <input type="text" :value="fruit.join()">
  </div>
</template>

<script>
export default {
  data(){
    return {
      radioList:[
        {value:"男",label:"男"},
        {value:"女",label:"女"},
        {value:"人妖",label:"人妖"}
      ],
      sex:"男",
      checkBoxList:[
        {value:"蘋果",label:"蘋果"},
        {value:"香蕉",label:"香蕉"},
        {value:"梨",label:"梨"},
        {value:"西瓜",label:"西瓜"}
      ],
      fruit:["蘋果","香蕉"]
    }
  },
  methods:{
    clickRadio(val){
      this.sex=val;
    },
    clickCheckBox(val){
      if(this.fruit.includes(val)){
        this.fruit.splice(this.fruit.indexOf(val),1);
      }else{
        this.fruit.push(val);
      }
      console.log(this.fruit.join())
    }
  }
}
</script>

<style lang="scss" scoped>
.imgBox{
  width:16px;
  height:16px;
  display:inline-block;
}
.imgBox img{
  width:100%;
  height:100%;
}

</style>

 上圖