FS-UI v0.1.33

Radio 单选框

使用指南

import { Radio, RadioGroup } from 'fs-ui'
export default {
  components: {
    fsRadio: Radio,
    fsRadioGroup: RadioGroup
  }
}
1
2
3
4
5
6
7

代码演示

  • 基本选择框
<fs-radio-group v-model="checked1" @change="change">
  <fs-radio name="1">全部员工</fs-radio>
  <fs-radio name="2">全部员工</fs-radio>
</fs-radio-group>
1
2
3
4
export default {
  data () {
    return {
      checked1: '1',
      checked2: '2',
      checked3: '1',
      checked4: '2',
      checked5: '1',
      checked6: '3'
    }
  },
  methods: {
    change (val) {
      console.log(val)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 自定义图标
<fs-radio-group v-model="checked2" @change="change">
  <fs-radio name="1" icon="lock">全部员工</fs-radio>
  <fs-radio name="2" icon="lock">全部员工</fs-radio>
</fs-radio-group>
1
2
3
4
  • 禁用状态
<fs-radio-group disabled v-model="checked3" @change="change">
  <fs-radio name="1">全部员工</fs-radio>
  <fs-radio name="2">全部员工</fs-radio>
</fs-radio-group>
1
2
3
4
  • 媒体样式
<fs-radio-group v-model="checked4" @change="change">
  <fs-radio name="1" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user"/>
  </fs-radio>
  <fs-radio name="2" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user"/>
  </fs-radio>
</fs-radio-group>
1
2
3
4
5
6
7
8
  • 自定义前缀
<fs-radio-group class="common" v-model="checked5" @change="change">
  <fs-radio name="1">
    <div slot="prefix">
      <fs-icon name="wechatpay" class="title-icon" />微信收款
    </div>
  </fs-radio>
  <fs-radio name="2">
    <div slot="prefix">
      <fs-icon name="jdpay" class="title-icon" />支付宝收款
    </div>
  </fs-radio>
  <fs-radio name="3">
    <div slot="prefix">
      <fs-icon name="alipay" class="title-icon" />京东收款
    </div>
  </fs-radio>
</fs-radio-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 自定义后缀
<fs-radio-group class="common" v-model="checked6" @change="change">
  <fs-radio name="1">
    <div slot="suffix">
      <fs-icon name="wechatpay" class="title-icon" />
    </div>
    微信收款
  </fs-radio>
  <fs-radio name="2">
    <div slot="suffix">
      <fs-icon name="jdpay" class="title-icon" />
    </div>
    支付宝收款
  </fs-radio>
  <fs-radio name="3">
    <div slot="suffix">
      <fs-icon name="alipay" class="title-icon" />
    </div>
    京东收款
  </fs-radio>
</fs-radio-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Radio属性

参数 说明 类型 默认值
name 唯一值,必传作为唯一依据 String | Number -
disabled 是否禁用 Boolean false
icon 自定义图标,可选值参考icon组件 String correct
type 类型，可选值：default,media String default
title 标题，配置type=media使用 String -
circle 选择图标是否为圆形 Boolean true
subtitle 子标题，配合type=media使用 String -
full 是否铺满 Boolean true

RadioGroup属性

参数 说明 类型 默认值
v-model 选中项的name属性 String | Number -
disabled 是否禁用 Boolean -

RadioGroup事件

事件名称 说明 回调
change 选中状态变化是触发 当前选中状态列表

Radio 插槽

插槽名 说明
prefix 在选择框之前添加内容
suffix 在选择框后添加内容

← Switch 切换 →