Vue Super UI

切换模式

本文总阅读量 次

单选框 Radio ​

何时使用 ​

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

基本使用 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
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(1)
watchEffect(() => {
  console.log('value:', value.value)
})
</script>
<template>
  <Radio :options="options" v-model:value="value" />
</template>

按钮样式 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
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 value = ref(1)
</script>
<template>
  <Radio :options="options" v-model:value="value" button />
</template>

填底的按钮样式 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
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 value = ref(1)
</script>
<template>
  <Radio :options="options" v-model:value="value" button button-style="solid" />
</template>

禁用 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡


北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
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 value = ref(1)
</script>
<template>
  <Radio :options="options" v-model:value="value" disabled />
  <br />
  <br />
  <Radio :options="options" v-model:value="value" button disabled />
</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(1)
watchEffect(() => {
  console.log('value:', value.value)
})
</script>
<template>
  <Radio :options="optionsDisabled" v-model:value="value" />
  <br />
  <br />
  <Radio :options="optionsDisabled" v-model:value="value" button />
</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(1)
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(1)
watchEffect(() => {
  console.log('value:', value.value)
})
</script>
<template>
  <Radio :gap="24" :options="options" v-model:value="value" />
</template>

APIs ​

参数说明类型默认值必传
options单选元素数据Option[][]true
disabled是否禁用booleanfalsefalse
vertical是否垂直排列booleanfalsefalse
value
v-model
当前选中的值anynullfalse
gap多个单选框之间的间距，单位px，垂直排列时，间距即垂直间距number8false
button是否启用按钮样式booleanfalsefalse
buttonStyle按钮样式风格'outline' | 'solid' ｜ 'outline'false

Option Type ​

名称说明类型必传
label选项名stringtrue
value选项值anytrue
disabled是否禁用单个单选器booleanfalse

Events ​

事件名称说明参数
change选项变化时的回调函数(value: any) => void