SaaS-lib/lib/component/form/radio/radio-group.vue

<!-- @format -->

<template>
  <a-radio-group v-bind="getBindValue">
    <template v-if="radioType === 'radio'">
      <a-radio
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :disabled="item.disabled">
        {{ item.label }}
      </a-radio>
    </template>
    <template v-else>
      <a-radio-button
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        :disabled="item.disabled">
        {{ item.label }}
      </a-radio-button>
    </template>
  </a-radio-group>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import { PropTypes, tuple } from '/nerv-lib/util/type';

  export default defineComponent({
    name: 'NsRadioGroup',
    props: {
      radioType: PropTypes.oneOf(tuple('radio', 'radioButton')).def('radioButton'),
      prefixCls: PropTypes.string,
      defaultValue: PropTypes.any,
      value: PropTypes.any,
      size: PropTypes.oneOf(tuple('large', 'default', 'small')).def('default'),
      options: PropTypes.array,
      disabled: PropTypes.looseBool,
      name: PropTypes.string,
      buttonStyle: PropTypes.oneOf(tuple('outline', 'solid')).def('solid'),
      onChange: PropTypes.func,
    },
    emits: ['update:value', 'change'],
    setup(props, { attrs }) {
      const getBindValue = computed(() => {
        return {
          ...props,
          ...attrs,
          options: [],
        };
      });

      return { getBindValue };
    },
  });
</script>
<style lang="less" scoped></style>