<template lang="html">
  <div class="">
    <checker radio-required @on-change="checkerChange" v-model="checkedValue" default-item-class="radio-item" selected-item-class="radio-item-selected">
      <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem, TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem
  },
  data () {
    return {
      checkedValue: '1',
      options: [
        {
          key: '1',
          value: '白'
        },
        {
          key: '2',
          value: '富'
        },
        {
          key: '3',
          value: '美'
        },
        {
          key: '4',
          value: '潘'
        }
      ]
    }
  },
  methods: {
    checkerChange (val) {
      console.warn(val);
    }
  }
}
</script>

<style lang="less" scoped>
.radio-item {
  margin-right: 15px;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  i {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-size: cover;
    background-image: url(../../assets/unradio.png);
    vertical-align: middle;
    margin-right: 0.5rem;
  }
}
.radio-item-selected {
  i {
    background-image: url(../../assets/radio.png)
  }
}
</style>