ebiz-h5/src/components/ebiz/SelectRadio.vue

<template>
  <div class="sex-radio">
    <div class="van-cell-group ">
      <div class="van-cell van-field pv7" :class="{ 'van-cell--required': required }">
        <div class="van-cell__title van-field__label">
          <span>{{ label }}</span>
        </div>
        <van-radio-group class="radio-area" v-model="radio">
          <van-radio @click="handleChoose(itemRadio.value)" :name="itemRadio.value" v-for="(itemRadio, index) in radios" :key="index">
            <div slot="icon"></div>
            <van-button class="ph30" type="danger" :plain="radio == itemRadio.value ? false : true" round size="small">{{ itemRadio.label }}</van-button>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
  </div>
</template>
<script>
import { RadioGroup, Radio } from 'vant'
export default {
  name: 'select-radio',
  props: {
    value: {
      type: String,
      default: '0'
    },
    label: {
      type: String,
      default: ''
    },
    radios: {
      type: Array,
      default: []
    },
    required: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleChoose(value) {
      if (this.disabled) {
        return
      }
      this.$emit('update:value', value)
      this.$emit('radioChange', value)
    }
  },
  computed: {
    radio: {
      get() {
        return this.value
      },
      set() {}
    }
  },
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  }
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.sex-radio {
  .radio-area {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    margin-left: -8px;
  }
  .van-cell {
    align-items: center;
  }
  .van-button--plain {
    background: #fff;
  }
}
.sex-radio:not(:last-child)::after {
  position: absolute;
  z-index: 99;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  // bottom: 0;
  // top: 0;
  left: 4.26667vw;
  border-bottom: 1px solid #dadada;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>