radio单选框组实现

vue实现一个单选框

前段时间需要用到一个移动端的单选框组,奈何使用的一个ui库中的样式并不能满足需求，所以就自己写了一个
话不多说：贴代码

<template>
  <div class="arz-radio">
   <div v-for="(option,index) in options" class="radio-content"  :key="index">
        <label class="ui-radio" :class="{ 'checked' : radioModel == option.value}">
            <input type="radio" v-model="radioModel" :value="option.value" @change="radioChange($event)" />
        </label>
        <span class="arz-pl-5" :class="{'activeColor':radioModel == option.value,'label-color':radioModel !== option.value}">
        {{ option.name }}
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'wt-radio-group',
  props: {
    options: {
      type: [Array, Object]
    },
    value: {},
    selectOption: ''
  },
  data() {
    return {
      radioModel: '',
      selectRadio: ''
    }
  },
  watch: {
    radioModel(newVlaue, oldValue) {
      this.$emit('input', this.radioModel ? this.radioModel : this.radioModel)
    },
    value(newVlaue, oldValue) {
      this.radioModel = newVlaue
    }
  },
  methods: {
    radioChange($event) {
      this.selectRadio = $event.target.value
      this.$emit('radioChange', $event.target.value)
    }
  },
  mounted() {
    this.radioModel = this.value
  }
}
</script>

<style scoped lang="scss">
.arz-radio{
  // width: 100%;
  display: flex;
  align-items: center;
    /deep/ .radio-content{
    display: flex;
    min-width: 60px;
    align-items: center;
  .ui-radio{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid $dkkj-theme-color;
      display: inline-block;
      position: relative;
  }
  .ui-radio.disabled{
      border-color: #ccc;
  }
  .ui-radio.checked {
      opacity: 1;
      background: url('https://arzpub.ufile.ismarthealth.com/arz-h5-teeth-radioGroupChecked.png') no-repeat;
      background-size:100% 100%;
      border: none;
      transition: 0.1s;
      transform: scale(1);
  }
  .ui-radio input[type=radio]{
      opacity: 0;
      margin: 0;
  }
  .activeColor{
    color:black;
    font-weight: 500;
  }
  .label-color{
    color: #999999;
  }
}

}
</style>