android-uniapp/plugins/ly-radio-group.vue

<template>
  <view :style="[getStyle]"
        class="ly-radio-group"
  >
    <view v-for="(item,index) in list" :key="index" :class="{'action':item[valueName] == value}"
          class="ly-radio-group-item" @click="changeHandle(item)">
      {{ item[labelName] }}
    </view>
  </view>

</template>

<script>
export default {
  props: {
    list: {
      type: [Object, Array],
      default: []
    },
    labelName: {
      type: String,
      default: 'label'
    },
    valueName: {
      type: String,
      default: 'value'
    },
    value: {
      type: [String, Number],
      default: '',
    },
    change: {
      type: Function
    },
    height: {
      type: [Number, String],
      default: 70,
    },
    size: {
      type: [Number, String],
      default: 26,
    },
    color: {
      type: String,
      default: '#303133',
    },
    bgColor: {
      type: String,
      default: 'transparent',
    },
    bColor: {
      type: String,
      default: '#dcdfe6',
    },
    actionColor: {
      type: String,
      default: '#409eff',
    }
  },
  model: {
    prop: 'value',
    //这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
    event: 'input'
  },
  data() {
    return {}
  },
  computed: {
    getStyle() {
      let data = {
        '--color': this.color,
        '--bg-color': this.bgColor,
        '--b-color': this.bColor,
        '--action-color': this.actionColor,
      }
      return data
    },
  },
  methods: {
    changeHandle(item) {
      this.$emit('input', item[this.valueName])
      this.$emit('change', item)
    },
  }
}
</script>

<style lang="scss" scoped>
.ly-radio-group {
  display: inline-flex;
  width: 100%;

  &-item {
    border: 2rpx solid var(--b-color);
    border-left: 0;
    height: 70rpx;
    font-size: 26rpx;
    //padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color);
    background: var(--bg-color);
    box-sizing: content-box;
    flex: 1;

    &:first-child {
      border-left: 2rpx solid var(--b-color);
      border-top-left-radius: 10rpx;
      border-bottom-left-radius: 10rpx;
    }

    &:last-child {
      border-top-right-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
    }

    &.action {
      border-color: var(--action-color);
      background: var(--action-color);
      color: #FFFFFF;
    }
  }
}
</style>