提交

src/components/ebiz/SelectRadio.vue

@@ -0,0 +1,93 @@
+<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
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {},
+  methods: {
+    handleChoose(value) {
+      this.$emit('update:value', 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>