fs-weapp/radio

Radio 单选框

使用指南

在 app.json 或 index.json 中引入radio, radio-group组件

{
  "usingComponents": {
    "fs-radio-group": "path/components/radio-group/index",
    "fs-radio": "path/components/radio/index"
  }
}
1
2
3
4
5
6

代码演示

  • 基本选择框
<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
  value="{{checked1}}"
  bind:change="handleChange">
  <fs-radio name="1">店铺名称</fs-radio>
  <fs-radio name="2">店铺名称</fs-radio>
</fs-radio-group>
1
2
3
4
5
6
  • 自定义图标
<fs-radio-group
  value="{{checked2}}"
  bind:change="handleChange">
  <fs-radio icon="lock" name="1">全部员工</fs-radio>
  <fs-radio icon="lock" name="2">全部员工</fs-radio>
</fs-radio-group>
1
2
3
4
5
6
  • 禁用状态
<fs-radio-group
  disabled
  value="{{checked3}}"
  bind:change="handleChange">
  <fs-radio name="1">全部员工</fs-radio>
  <fs-radio name="2">全部员工</fs-radio>
</fs-radio-group>
1
2
3
4
5
6
7
  • 媒体样式
<fs-radio-group
  value="{{checked4}}"
  bind:change="handleChange">
  <fs-radio  name="1" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user" custom-class="custom-user-img"/>
  </fs-radio>
  <fs-radio name="2" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user" custom-class="custom-user-img"/>
  </fs-radio>
</fs-radio-group>
1
2
3
4
5
6
7
8
9
10
  • 自定义前缀
<fs-radio-group value="{{checked5}}" bind:change="handleChange">
  <fs-radio name="1">
    <view slot="prefix">
      <fs-icon name="wechatpay" custom-class="title-icon" />微信收款
    </view>
  </fs-radio>
  <fs-radio name="2">
    <view slot="prefix">
      <fs-icon name="jdpay" custom-class="title-icon" />支付宝收款
    </view>
  </fs-radio>
  <fs-radio name="3">
    <view slot="prefix">
      <fs-icon name="alipay" custom-class="title-icon" />京东收款
    </view>
  </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 value="{{checked6}}" bind:change="handleChange">
  <fs-radio name="1">
    <view slot="suffix">
      <fs-icon name="wechatpay" custom-class="title-icon" />
    </view>
    微信收款
  </fs-radio>
  <fs-radio name="2">
    <view slot="suffix">
      <fs-icon name="jdpay" custom-class="title-icon" />
    </view>
    支付宝收款
  </fs-radio>
  <fs-radio name="3">
    <view slot="suffix">
      <fs-icon name="alipay" custom-class="title-icon" />
    </view>
    京东收款
  </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
Page({

  /**
   * 页面的初始数据
   */
  data: {
    checked1: '1',
    checked2: '2',
    checked3: '1',
    checked4: '2',
    checked5: '1',
    checked6: '3'
  },

  handleChange(e) {
    const { key } = e.currentTarget.dataset
    this.setData({ [key]: e.detail })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Radio属性

参数 说明 类型 默认值
name 唯一值,必传作为唯一依据 String -
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属性

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

RadioGroup事件

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

Radio 插槽

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

← Rate 评分 →