mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-10-02 15:09:57 +08:00
rex
GitHub
parent
60acd2d848
commit
079b344ff1
@ -9,6 +9,18 @@
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="水平排列" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
direction="horizontal"
|
||||
>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态" padding>
|
||||
<van-radio-group
|
||||
disabled
|
||||
@ -27,7 +39,9 @@
|
||||
data-key="radioShape"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" shape="square" custom-class="demo-radio">单选框</van-radio>
|
||||
<van-radio name="1" shape="square" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" shape="square">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -38,7 +52,9 @@
|
||||
data-key="radio3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
|
||||
<van-radio name="1" custom-class="demo-radio" checked-color="#07c160"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" checked-color="#07c160">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -49,7 +65,9 @@
|
||||
data-key="radioSize"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" icon-size="24px" custom-class="demo-radio">单选框</van-radio>
|
||||
<van-radio name="1" icon-size="24px" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" icon-size="24px">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -67,7 +85,7 @@
|
||||
src="{{ radio4 === '1' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
></image>
|
||||
</van-radio>
|
||||
<van-radio use-icon-slot name="2">
|
||||
自定义图标
|
||||
@ -76,7 +94,7 @@
|
||||
src="{{ radio4 === '2' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
></image>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -87,7 +105,9 @@
|
||||
data-key="radioLabel"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio label-disabled name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio label-disabled name="1" custom-class="demo-radio"
|
||||
>单选框 1</van-radio
|
||||
>
|
||||
<van-radio label-disabled name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -95,21 +115,11 @@
|
||||
<demo-block title="与 Cell 组件一起使用">
|
||||
<van-radio-group value="{{ radio5 }}">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
title="单选框 1"
|
||||
clickable
|
||||
data-name="1"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio slot="right-icon" name="1" />
|
||||
<van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="1"></van-radio>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
title="单选框 2"
|
||||
clickable
|
||||
data-name="2"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio slot="right-icon" name="2" />
|
||||
<van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="2"></van-radio>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
@ -1 +1,6 @@
|
||||
// empty
|
||||
.van-radio-group {
|
||||
&--horizontal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ VantComponent({
|
||||
type: null,
|
||||
observer: 'updateChildren',
|
||||
},
|
||||
direction: String,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
observer: 'updateChildren',
|
||||
@ -21,17 +22,17 @@ VantComponent({
|
||||
|
||||
methods: {
|
||||
updateChildren() {
|
||||
(
|
||||
this.children || []
|
||||
).forEach((child: WechatMiniprogram.Component.TrivialInstance) =>
|
||||
this.children.forEach(
|
||||
(child: WechatMiniprogram.Component.TrivialInstance) =>
|
||||
this.updateChild(child)
|
||||
);
|
||||
},
|
||||
|
||||
updateChild(child: WechatMiniprogram.Component.TrivialInstance) {
|
||||
const { value, disabled } = this.data;
|
||||
const { value, disabled, direction } = this.data;
|
||||
child.setData({
|
||||
value,
|
||||
direction,
|
||||
disabled: disabled || child.data.disabled,
|
||||
});
|
||||
},
|
||||
|
||||
@ -1 +1,5 @@
|
||||
<slot />
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="{{ utils.bem('radio-group', [direction]) }}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
@ -29,6 +29,7 @@ Page({
|
||||
data: {
|
||||
radio: '1',
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
radio: event.detail,
|
||||
@ -37,6 +38,21 @@ Page({
|
||||
});
|
||||
```
|
||||
|
||||
### 水平排列
|
||||
|
||||
将`direction`属性设置为`horizontal`后，单选框组会变成水平排列。
|
||||
|
||||
```html
|
||||
<van-radio-group
|
||||
value="{{ radio }}"
|
||||
bind:change="onChange"
|
||||
direction="horizontal"
|
||||
>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
|
||||
@ -168,24 +184,25 @@ Page({
|
||||
|
||||
### RadioGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ---------------------- | --------- | ------- | ---- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - | - |
|
||||
| value | 当前选中项的标识符 | _any_ | - | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前选中项的标识符 | _any_ | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||
| direction `v1.6.7` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
|
||||
|
||||
### Radio Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| name | 标识符 | _string_ | - | - |
|
||||
| shape | 形状，可选值为 `square` | _string_ | `round` | - |
|
||||
| disabled | 是否为禁用状态 | _boolean_ | `false` | - |
|
||||
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` | - |
|
||||
| label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
|
||||
| icon-size | 图标大小，默认单位为`px` | _string \| number_ | `20px` | - |
|
||||
| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
|
||||
| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------- | ------------------ | --------- |
|
||||
| name | 标识符 | _string_ | - |
|
||||
| shape | 形状，可选值为 `square` | _string_ | `round` |
|
||||
| disabled | 是否为禁用状态 | _boolean_ | `false` |
|
||||
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
|
||||
| label-position | 文本位置，可选值为 `left` | _string_ | `right` |
|
||||
| icon-size | 图标大小，默认单位为`px` | _string \| number_ | `20px` |
|
||||
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
|
||||
| use-icon-slot | 是否使用 icon 插槽 | _boolean_ | `false` |
|
||||
|
||||
### Radio Event
|
||||
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
.theme(margin-right, '@padding-sm');
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="van-radio custom-class">
|
||||
<view class="{{ utils.bem('radio', [direction]) }} custom-class">
|
||||
<view
|
||||
wx:if="{{ labelPosition === 'left' }}"
|
||||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user