radio.vue

/**
* @Author think
* @Date 2019-07-10 13:57
*/

<template>
  <section class="h-radio" @click="click">
    <div :class="{'disable':disable}" class="radio-icon">
      <i :class="icon" class="icon"/>
    </div>
    <span class="radio-title" v-text="title"/>
  </section>
</template>

<script>
let CHECKEDCLASS = 'ion-ios-checkmark'
let DEFAULTCLASS = 'ion-ios-circle-outline'
export default {
  name: 'Radio',
  props: {
    disable: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      icon: DEFAULTCLASS,
    }
  },
  watch: {},
  mounted () {
    this.$parent && this.$parent.radioList.push(this)
    this.icon = this.checked ? CHECKEDCLASS : DEFAULTCLASS
    this.disable = this.disable ? this.disable : this.$parent.disable
  },
  destroyed () {
    this.$parent && this.$parent.radioList.splice(this.$parent.radioList.indexOf(this), 1)
  },
  methods: {
    click () {
      let vm = this
      if (!vm.disable) {
        vm.$parent.radioList.forEach(item => {
          item.icon = DEFAULTCLASS
        })
        vm.icon = CHECKEDCLASS
        this.$parent.click(this.name)
      }
    },
  },
}
</script>
<style lang="less">
  @import "../../common/styles/variables";
  .h-radio {
    display: flex;
    height: 100%;
    align-items: center;

    .radio-icon {
      width: 26px;
      height: 26px;
      .icon {
        font-size: 26px;
      }
      .ion-ios-circle-outline{
        color: #d9d9d9;
      }
      .ion-ios-checkmark{
        color: @radio-box-bg;
      }
    }
    .disable{
        opacity: .7;
    }
    .radio-title{
      line-height: 0.5rem;
      font-size: 16px;
      color: #333;
      margin-left: 6px;
    }
  }

</style>