mpx-cube-ui

# Cube-Radio-Group

# 介绍

单选框组，用来控制多个单选框状态，以及数据透传，可设置单选框组内容，样式等。

# 示例

# 基础用法

通过wx:model双向绑定选中的单选框的值，options是个数组，每个元素表示等同于单选框的option。

收起 
<template>
  <view class="radio-group-demo">
    <view class="cube-radio-group-example">
      <cube-radio-group
        options="{{ options }}"
        wx:model="{{ checkedValue }}"
        wx:model-prop="value"
      ></cube-radio-group>
    </view>
    <view bindtap="test">click me</view>
    <view class="view-desc">selected value: {{ checkedValue }}</view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
收起 
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    data: {
      options: [
        {
          value: 'Option1',
          text: 'Option1'
        },
        {
          value: 'Option2',
          text: 'Option2'
        }
      ],
      checkedValue: 'Option2'
    },
    methods: {
      test() {
        this.checkedValue = 'Option1'
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 控制行数

使用colNum属性控制一行显示个数。

收起 
<template>
  <view class="radio-group-column-num-demo">
    <view class="cube-radio-group-example">
      <cube-radio-group
        options="{{ options }}"
        colNum="{{ 3 }}"
        wx:model="{{ checkedValue }}"
        wx:model-prop="value"
      ></cube-radio-group>
    </view>
    <view class="view-desc">selected value: {{ checkedValue }}</view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
收起 
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    data: {
      options: [
        {
          value: 1,
          text: '1'
        },
        {
          value: 2,
          text: '2'
        },
        {
          value: 3,
          text: '3',
          disabled: true
        },
        {
          value: 4,
          text: '4'
        },
        {
          value: 5,
          text: '5'
        },
        {
          value: 6,
          text: '6'
        },
        {
          value: 7,
          text: '7'
        },
        {
          value: 8,
          text: '8'
        }
      ],
      checkedValue: ''
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 禁用设置

使用disabled属性禁用单选框组。

收起 
<template>
  <view class="radio-group-disabled-demo">
    <view class="cube-radio-group-example">
      <cube-radio-group
        options="{{ options }}"
        wx:model="{{ checkedValue }}"
        wx:model-prop="value"
        disabled="{{true}}"
      ></cube-radio-group>
    </view>
    <view class="view-desc">selected value: {{ checkedValue }}</view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
收起 
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    data: {
      options: [
        {
          value: 'Option1',
          text: 'Option1',
          position: 'right'
        },
        {
          value: 'Option2',
          text: 'Option2',
          position: 'right'
        },
        {
          value: 'Option3',
          text: 'Option3',
          disabled: true,
          position: 'right'
        }
      ],
      checkedValue: ''
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 单行布局

使用inline将布局改为单行布局。

收起 
<template>
  <view class="radio-group-inline-demo">
    <view class="cube-radio-group-example">
      <cube-radio-group
        options="{{ options }}"
        inline="{{ true }}"
        wx:model="{{ checkedValue }}"
        wx:model-prop="value"
      ></cube-radio-group>
    </view>
    <view class="view-desc">selected value: {{ checkedValue }}</view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
收起 
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    data: {
      options: [
        {
          value: 'Option1',
          text: 'Option1'
        },
        {
          value: 'Option2',
          text: 'Option2'
        },
        {
          value: 'Option3',
          text: 'Option3'
        }
      ],
      checkedValue: ''
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 使用插槽

除了使用内置的 radio 组件，您还可以使用插槽来自定义 radio。

收起 
<template>
  <view class="radio-group-slot-demo">
    <view class="cube-radio-group-example">
      <cube-radio-group>
        <cube-radio
          wx:for="{{ options }}"
          wx:for-index="index"
          wx:for-item="option"
          wx:key="index"
          option="{{ option }}"
          wx:model="{{ checkedValue }}"
          wx:model-prop="value"
          ></cube-radio>
      </cube-radio-group>
    </view>
    <view class="view-desc">selected value: {{ checkedValue }}</view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
收起 
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    options: {
      styleIsolation: 'shared'
    },
    data () {
      return {
        options: [
          {
            value: 'Option1',
            text: 'Option1'
          },
          {
            value: 'Option2',
            text: 'Option2'
          }
        ],
        checkedValue: 'Option1'
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
option 配置项 Object Option Option
value 双向绑定属性值 String String/Number -
options 选项数据 Array - ExtendOption[]
inline 是否行内展示 Boolean - false
colNum 控制每行展示的个数 Number - 1

# TsType

Name Type
Option 
{
  desc?: string;
  disabled?: boolean;
  position?: left|right;
  text?: string;
  value: string|number;
}
ExtendOption 
{
  desc?: string;
  text: string;
}&{
  desc?: string;
  disabled?: boolean;
  position?: left|right;
  text?: string;
  value: string|number;
}

# Events

事件名 说明 参数
input 绑定值变化时触发 事件对象 e，包含选中的单选框 value 值

# Slots

插槽名 说明
— (默认插槽) 自定义使用 radio

← Input 输入框 →