ZXUI

<template>
  <zx-radio-group
    v-model="radiovalue1"
    placement="column"
    @change="groupChange"
  >
    <zx-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </zx-radio>
  </zx-radio-group>
</template>

<script>
export default {
	data() {
		return {
          // 基本案列数据
          radiolist1: [{
            name: '苹果',
            disabled: false
          },
            {
              name: '香蕉',
              disabled: false
            },
            {
              name: '橙子',
              disabled: false
            }, {
              name: '榴莲',
              disabled: false
            }
          ],
          // zx-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
          radiovalue1: '苹果',
		};
	},
	methods: {
      groupChange(n) {
        console.log('groupChange', n);
      },
      radioChange(n) {
        console.log('radioChange', n);
      }
	}
};
</script>

<zx-radio-group v-model="value">
	<zx-radio shape="circle" label="月明人倚楼"></zx-radio>
</zx-radio-group>

<zx-radio-group v-model="value">
	<zx-radio :disabled="true" label="明月几时有"></zx-radio>
</zx-radio-group>

<zx-radio-group v-model="value">
	<zx-radio :labelDisabled="true" label="明月几时有"></zx-radio>
</zx-radio-group>

<zx-radio-group v-model="value">
	<zx-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></zx-radio>
</zx-radio-group>

<zx-radio-group 
    v-model="value"
    placement="row">
	<zx-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></zx-radio>
</zx-radio-group>

<zx-radio-group 
    v-model="value"
    iconPlacement="right">
	<zx-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></zx-radio>
</zx-radio-group>