BIN-UI-DESIGN

Appearance

On this page

单选框 Radio ​

单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。

基础用法 ​

false
<template>
  <b-radio v-model="single">Radio</b-radio>
  <span style="color: #ff4511">{{ single }}</span>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const single = ref(false)
</script>
<template>
  <b-radio v-model="single">Radio</b-radio>
  <span style="color: #ff4511">{{ single }}</span>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const single = ref(false)
</script>

组合使用 ​

facebook

苹果

<template>
  <div>
    <b-radio-group v-model="social">
      <b-radio label="twitter">
        <span>Twitter</span>
      </b-radio>
      <b-radio label="facebook">
        <span>Facebook</span>
      </b-radio>
      <b-radio label="github">
        <span>Github</span>
      </b-radio>
      <b-radio label="snapchat">
        <span>Snapchat</span>
      </b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-radio-group v-model="fruit">
      <b-radio label="香蕉"></b-radio>
      <b-radio label="苹果"></b-radio>
      <b-radio label="西瓜"></b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref('facebook')
const fruit = ref('苹果')
</script>
<template>
  <div>
    <b-radio-group v-model="social">
      <b-radio label="twitter">
        <span>Twitter</span>
      </b-radio>
      <b-radio label="facebook">
        <span>Facebook</span>
      </b-radio>
      <b-radio label="github">
        <span>Github</span>
      </b-radio>
      <b-radio label="snapchat">
        <span>Snapchat</span>
      </b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-radio-group v-model="fruit">
      <b-radio label="香蕉"></b-radio>
      <b-radio label="苹果"></b-radio>
      <b-radio label="西瓜"></b-radio>
    </b-radio-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref('facebook')
const fruit = ref('苹果')
</script>

禁用状态 ​

设置 disabled 可以禁用单选组或者某个单选值

<template>
  <div>
    <b-radio v-model="disabledSingle" disabled>Checkbox</b-radio>
    <b-radio-group v-model="disabledGroup">
      <b-radio label="香蕉" disabled></b-radio>
      <b-radio label="苹果" disabled></b-radio>
      <b-radio label="西瓜"></b-radio>
    </b-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const disabledSingle = ref(true)
const disabledGroup = ref('苹果')
</script>
<template>
  <div>
    <b-radio v-model="disabledSingle" disabled>Checkbox</b-radio>
    <b-radio-group v-model="disabledGroup">
      <b-radio label="香蕉" disabled></b-radio>
      <b-radio label="苹果" disabled></b-radio>
      <b-radio label="西瓜"></b-radio>
    </b-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const disabledSingle = ref(true)
const disabledGroup = ref('苹果')
</script>

按钮类型 ​

设置 type="button" 可以设置单选框为按钮类型


<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="small">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="mini">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <br />
      <b-radio-group v-model="fruit" type="button" disabled>
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('苹果')
</script>
<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="small">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="button" size="mini">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="button">
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <br />
      <b-radio-group v-model="fruit" type="button" disabled>
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('苹果')
</script>

胶囊类型 ​

设置 type="capsule" 可以设置单选框为胶囊类型

<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="small">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="mini">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>

    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" disabled>
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('苹果')
</script>
<template>
  <div flex>
    <div>
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="small">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" size="mini">
        <b-radio label="香蕉"></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>

    <div style="margin-left: 24px">
      <b-radio-group v-model="fruit" type="capsule">
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
      <div class="p10" />
      <b-radio-group v-model="fruit" type="capsule" disabled>
        <b-radio label="香蕉" disabled></b-radio>
        <b-radio label="苹果"></b-radio>
        <b-radio label="桃子"></b-radio>
        <b-radio label="西瓜"></b-radio>
      </b-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const fruit = ref('苹果')
</script>

Props ​

参数说明类型可选值默认值
value只在单独使用时有效。可以使用 v-model 双向绑定数据Boolean—false
label组合使用时有效。指定当前选项的 value 值，组合会自动判断是否选中String/Number/Boolean——
disabled是否禁用当前项Boolean—false

Radio events ​

事件名说明返回值
change在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发...

RadioGroup props ​

参数说明类型可选值默认值
value指定选中项目的集合，可以使用 v-model 双向绑定数据String/ Number—''
disabled是否禁用所有选项Boolean—false
type是否开启button模式Stringbutton /capsule—
size按钮模式单选组的尺寸Stringlarge、small、default—

RadioGroup events ​

事件名说明返回值
change在选项状态发生改变时触发，返回已选中的数组。通过修改外部的数据改变时不会触发...

MIT Licensed | Copyright © 2023-present bin-ui-design