绝配前端组件库

# Radio 单选框

# 基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

要使用 Radio 组件，只需要设置 v-model 绑定变量，选中意味着变量的值为相应 Radio label 属性的值，label 可以是 String、Number 或 Boolean。

<template>
  <jp-radio v-model="radio" label="1">备选项</jp-radio>
  <jp-radio v-model="radio" label="2">备选项</jp-radio>
  <jp-radio disabled v-model="radio" label="选中且禁用">备选项</jp-radio>
</template>
显示代码

# 单选框组

适用于在多个互斥的选项中选择的场景

结合 jp-radio-group 元素和子元素 jp-radio 可以实现单选组，在 jp-radio-group 中绑定 v-model，在 jp-radio 中设置好 label 即可，无需再给每一个 jp-radio 绑定变量，另外，还提供了 change 事件来响应变化，它会传入一个参数 value。

<template>
  <jp-radio-group v-model="radio">
    <jp-radio :label="3">备选项</jp-radio>
    <jp-radio :label="6">备选项</jp-radio>
    <jp-radio :label="9">备选项</jp-radio>
  </jp-radio-group>
</template>
显示代码

# 按钮样式

按钮样式的单选组合。

只需要把 jp-radio 元素换成 jp-radio-button 元素即可

<template>
  <div>
    <div>
      <jp-radio-group v-model="radio1">
        <jp-radio-button label="上海"></jp-radio-button>
        <jp-radio-button label="北京"></jp-radio-button>
        <jp-radio-button label="广州"></jp-radio-button>
        <jp-radio-button label="深圳"></jp-radio-button>
      </jp-radio-group>
    </div>
    <div style="margin-top: 20px">
      <jp-radio-group v-model="radio2" size="medium">
        <jp-radio-button label="上海"></jp-radio-button>
        <jp-radio-button label="北京"></jp-radio-button>
        <jp-radio-button label="广州"></jp-radio-button>
        <jp-radio-button label="深圳"></jp-radio-button>
      </jp-radio-group>
    </div>
    <div style="margin-top: 20px">
      <jp-radio-group v-model="radio3" size="small">
        <jp-radio-button label="上海"></jp-radio-button>
        <jp-radio-button label="北京" disabled></jp-radio-button>
        <jp-radio-button label="广州"></jp-radio-button>
        <jp-radio-button label="深圳"></jp-radio-button>
      </jp-radio-group>
    </div>
    <div style="margin-top: 20px">
      <jp-radio-group v-model="radio4" disabled size="mini">
        <jp-radio-button label="上海"></jp-radio-button>
        <jp-radio-button label="北京"></jp-radio-button>
        <jp-radio-button label="广州"></jp-radio-button>
        <jp-radio-button label="深圳"></jp-radio-button>
      </jp-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1: '上海',
      radio2: '上海',
      radio3: '上海',
      radio4: '上海'
    }
  }
}
</script>
显示代码

# 带有边框

设置 border 属性可以渲染为带有边框的单选框。

<template>
  <div>
    <div>
      <jp-radio v-model="radio1" label="1" border>备选项1</jp-radio>
      <jp-radio v-model="radio1" label="2" border>备选项2</jp-radio>
    </div>
    <div style="margin-top: 20px">
      <jp-radio v-model="radio2" label="1" border size="medium">备选项1</jp-radio>
      <jp-radio v-model="radio2" label="2" border size="medium">备选项2</jp-radio>
    </div>
    <div style="margin-top: 20px">
      <jp-radio-group v-model="radio3" size="small">
        <jp-radio label="1" border>备选项1</jp-radio>
        <jp-radio label="2" border disabled>备选项2</jp-radio>
      </jp-radio-group>
    </div>
    <div style="margin-top: 20px">
      <jp-radio-group v-model="radio4" size="mini" disabled>
        <jp-radio label="1" border>备选项1</jp-radio>
        <jp-radio label="2" border>备选项2</jp-radio>
      </jp-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1: '1',
      radio2: '1',
      radio3: '1',
      radio4: '1'
    }
  }
}
</script>
显示代码

# Radio Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string / number / boolean — —
label Radio 的 value string / number / boolean — —
disabled 是否禁用 boolean — false
border 是否显示边框 boolean — false
size Radio 的尺寸，仅在 border 为真时有效 string medium / small / mini —
name 原生 name 属性 string — —

# Radio Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

# Radio-group Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string / number / boolean — —
size 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 string medium / small / mini —
disabled 是否禁用 boolean — false
text-color 按钮形式的 Radio 激活时的文本颜色 string — #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string — #409EFF
isButton 按钮形式的 Radio 背景色 string — rgba(14, 19, 25,0.1)

# Radio-group Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

# Radio-button Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string / number — —
disabled 是否禁用 boolean — false
name 原生 name 属性 string — —

← Checkbox 多选框 →