wechat/src/components/radio/index.vue

<template>
  <div class="radio">
    <a v-for="(item,index) in data" :key="index" :class="{'active': item.id === value}" @click="cut(item)">{{item.value}}</a>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['data', 'value', 'disabled'],
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    cut (item) {
      if (!this.disabled) {
        this.$emit('input', item.id)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.radio {
  font-size: 0;
  white-space: nowrap;
  > * {
    display: block;
    font-size: 0.15rem;
    position: relative;
    padding-left: 0.25rem;
    color: #a1a1a1;
    margin-left: 0.5rem;
    line-height: .3rem;
    &::after {
      content: "";
      width: 0.14rem;
      height: 0.14rem;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border-radius: 100%;
      border: 0.01rem solid #fc6243;
      z-index: 1;
    }
    &.active::before {
      content: "";
      width: 0.08rem;
      height: 0.08rem;
      position: absolute;
      left: 0.04rem;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border-radius: 100%;
      background: #fc6243;
      z-index: 2;
    }
  }
}
</style>