Vue Amazing UI

Appearance

单选框 Radio ​

单选框

何时使用 ​

  • 用于在多个备选项中选中单个状态
  • 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多

基本使用 ​

Radio
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const checked = ref(false)
watchEffect(() => {
  console.log('checked', checked.value)
})
function onChange(value: string | number | boolean) {
  console.log('change', value)
}
</script>
<template>
  <Radio v-model:checked="checked" @change="onChange">Radio</Radio>
</template>

选项列表 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value', value.value)
})
function onChange(value: string | number | boolean) {
  console.log('change', value)
}
</script>
<template>
  <Radio :options="options" v-model:value="value" @change="onChange" />
</template>

按钮样式 ​

Radio Button
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const checked = ref(false)
const value = ref(2)
watchEffect(() => {
  console.log('checked', checked.value)
})
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Radio v-model:checked="checked" button>Radio Button</Radio>
    <Radio :options="options" v-model:value="value" button />
  </Space>
</template>

填底的按钮样式 ​

Radio Button Solid
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const checked = ref(false)
const value = ref(2)
watchEffect(() => {
  console.log('checked', checked.value)
})
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Radio v-model:checked="checked" button button-style="solid">Radio Button Solid</Radio>
    <Radio :options="options" v-model:value="value" button button-style="solid" />
  </Space>
</template>

禁用 ​

Radio
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const checked = ref(false)
const value = ref(2)
</script>
<template>
  <Space vertical>
    <Radio v-model:checked="checked" disabled>Radio</Radio>
    <Radio :options="options" v-model:value="value" disabled />
    <Radio :options="options" v-model:value="value" button disabled />
  </Space>
</template>

禁用选项 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const optionsDisabled = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2,
    disabled: true
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Radio :options="optionsDisabled" v-model:value="value" />
    <Radio :options="optionsDisabled" v-model:value="value" button />
    <Radio :options="optionsDisabled" v-model:value="value" button button-style="solid" />
  </Space>
</template>

垂直排列 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Radio vertical :options="options" v-model:value="value" />
</template>

自定义间距 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value', value.value)
})
const horizontalGap = ref(16)
const verticalGap = ref(8)
</script>
<template>
  <Flex vertical>
    <Row :gutter="24">
      <Col :span="12">
        <Flex gap="small" vertical> horizontal gap: <Slider v-model:value="horizontalGap" /> </Flex>
      </Col>
      <Col :span="12">
        <Flex gap="small" vertical> vertical gap: <Slider v-model:value="verticalGap" /> </Flex>
      </Col>
    </Row>
    <Radio :gap="[horizontalGap, verticalGap]" :options="options" v-model:value="value" />
  </Flex>
</template>

自定义单选区域宽高 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const value = ref(2)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Radio vertical :width="110" :height="150" :options="options" v-model:value="value" />
</template>

按钮大小 ​

small
middle
large
Radio Button
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const options = ref([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const checked = ref(false)
const value = ref(2)
watchEffect(() => {
  console.log('checked', checked.value)
})
watchEffect(() => {
  console.log('value', value.value)
})
const sizeOptions = [
  {
    label: 'small',
    value: 'small'
  },
  {
    label: 'middle',
    value: 'middle'
  },
  {
    label: 'large',
    value: 'large'
  }
]
const buttonSize = ref('middle')
</script>
<template>
  <Space vertical>
    <Radio v-model:checked="checked" button :button-size="buttonSize">Radio Button</Radio>
    <Radio :options="sizeOptions" v-model:value="buttonSize" />
    <Radio :options="options" v-model:value="value" button :button-size="buttonSize" />
    <Radio :options="options" v-model:value="value" button button-style="solid" :button-size="buttonSize" />
  </Space>
</template>

APIs ​

Radio ​

参数说明类型默认值
options单选框选项数据Option[][]
disabled是否禁用booleanfalse
vertical是否垂直排列，仅当 button: false 时生效booleanfalse
checked
v-model
当前是否选中booleanfalse
gap多个单选框之间的间距；垂直排列时为垂直间距，单位 px；数组间距用于水平排列折行时：[水平间距, 垂直间距]；仅当 button: false 时生效number | number[]8
width单选区域最大宽度，超出后折行，单位 px；仅当 button: false 时生效string | number'auto'
height单选区域最大高度，超出后滚动，单位 px；仅当 button: false 时生效string | number'auto'
button是否启用按钮样式booleanfalse
buttonStyle按钮样式风格'outline' | 'solid''outline'
buttonSize按钮大小；仅当 button: true 时生效'small' | 'middle' | 'large''middle'
value
v-model
当前选中的值string | number | booleanundefined

Option Type ​

名称说明类型默认值
label选项名stringundefined
value选项值string | number | booleanundefined
disabled?是否禁用选项booleanundefined

Events ​

名称说明类型
change选项变化时的回调函数(value: string | number | boolean) => void

Released under the MIT License.

Copyright © 2023-present the Muse Catcher