vue封装Checkbox多选框组件

1.效果展示

2.代码

checkList.vue代码

<template>
  <div class="radio">
    <label class="title">{
     {
     title}}</label>
    <a href="#"
       v-for="(item, index) in options"
       :key="index"
       class="radioLink">
      <div class="radioList">
        <div class="radioArea">
          <label>
            <span>
              <input type="checkbox"
                     :value="typeof item == 'string' ? item : item.value"
                     class="radioInput"
                     v-model="selectedValue"
                     :disabled="typeof item == 'string' ? false : item.disabled == true ? true :false">
              <span class="radioSelect"
                    :class="typeof item == 'string' ? '' : item.disabled == true ? 'radioSelectDisabled' : '' "></span>
            </span>
            <span class="selectListItem">{
     {
     typeof item == 'string' ? item : item.label}}</span>
          </label>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
     
  name: 'checkList',
  data () {
     
    return {
     
      selectedValue: []
    }
  },
  props: {
     
    title: String,
    options: [Srting,Array]
  },
  created () {
     
    // console.log(typeof (this.options));
    if (typeof (this.options) == 'string') {
     
      this.options = eval("(" + this.options + ")");
    }
    var that = this;
    if (that.options.length > 0) {
     
      that.options.forEach((item) => {
     
        item.checked == true ? that.selectedValue.push(item.value) : '';
      })
      that.$emit('getData', that.selectedValue);
    }
  },
  methods: {
     
  },
  computed: {
     
  },
  watch: {
     
    selectedValue () {
     
      this.$emit('getData', this.selectedValue);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
     
  color: #888;
  font-size: 0.26rem;
  height: 0.6rem;
  line-height: 0.6rem;
  display: block;
  padding: 0rem 0.2rem;
}
.radioLink {
     
  background-color: #fff;
  box-sizing: border-box;
  color: inherit;
  min-height: 40px;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.radioList {
     
  height: 0.96rem;
  line-height: 0.96rem;
  width: 100%;
  padding: 0rem 0.2rem;
  box-sizing: border-box;
}

.radioArea,
.radioArea label {
     
  height: 0.96rem;
  width: 100%;
  display: block;
}

.radioInput {
     
  display: none;
}

.radioSelect {
     
  box-sizing: border-box;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.radioSelectDisabled {
     
  background-color: #d9d9d9;
  border-color: #ccc;
}

.radioInput:disabled + .radioSelect {
     
  background-color: #d9d9d9 !important;
  border-color: #ccc !important;
}

.radioInput:checked + .radioSelect {
     
  background-color: #26a2ff;
  border-color: #26a2ff;
}

.radioInput:checked + .radioSelect::after {
     
  border-color: #fff;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}

.radioSelect::after {
     
  border: 2px solid transparent;
  border-left: 0;
  border-top: 0;
  content: ' ';
  top: 3px;
  left: 6px;
  position: absolute;
  width: 4px;
  height: 8px;
  -webkit-transform: rotate(45deg) scale(0);
  transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.selectListItem {
     
  font-size: 0.3rem;
  vertical-align: middle;
  margin-left: 6px;
}
</style>

3.在项目中引用组件

<template>
  <div class="about">
    <CheckList title="普通多选框列表"
               v-model="value"
               @getData="getinfo"
               :options="options" />
    <p>您选中的是：{
     {
     value}}</p>
    <CheckList title="有禁用选项的多选框列表"
               v-model="value1"
               @getData="getTtInfo"
               :options="options1" />
    <p>您选中的是：{
     {
     value1}}</p>
    <CheckList title="有选中禁用的多选框列表"
               v-model="value2"
               @getData="getinfov"
               :options="options2" />
    <p>您选中的是：{
     {
     value2}}</p>
  </div>

</template>
<script>
import CheckList from '@/components/checkList.vue'
export default {
     
  components: {
     
    CheckList
  },
  data () {
     
    return {
     
      value: '',
      value1: "",
      value2: "",
      options: ['optionA', 'optionB', 'optionC'],
      options1: [
        {
     
          label: 'disabled option',
          value: 'valueF',
          disabled: true
        },
        {
     
          label: 'optionE',
          value: 'valueE',
          disabled: false,
          checked: false
        },
        {
     
          label: 'optionA',
          value: 'valueA'
        },
        {
     
          label: 'optionB',
          value: 'valueB'
        }
      ],
      options2: [
        {
     
          label: 'checked disabled',
          value: 'valueE',
          disabled: true,
          checked: true
        },
        {
     
          label: 'optionA',
          value: 'valueA'
        },
        {
     
          label: 'optionB',
          value: 'valueB'
        }
      ]
    }
  },
  methods: {
     
    clickLeftIcon () {
     
      this.$router.back(-1)
    },
    getTtInfo (arr) {
     
      this.value1 = arr;
    },
    getinfo (arr) {
     
      this.value = arr;
    },
    getinfov (arr) {
     
      this.value2 = arr;
    }
  }
}
</script>


<style scoped>
.about {
     
  min-height: 100vh;
  background: #fff;
  box-sizing: border-box;
}
.about p {
     
  padding: 0rem 0.2rem;
  box-sizing: border-box;
  font-size: 0.28rem;
  margin-bottom: 0.8rem;
}
</style>