mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Radio: add checked-color prop (#2129)
This commit is contained in:
neverland
GitHub
parent
56231d90bc
commit
ec159b5e47
@ -10,6 +10,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
```html
|
||||
|
||||
@ -21,7 +21,18 @@
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-radio
|
||||
name="1"
|
||||
value="1"
|
||||
checked-color="#4b0"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
{{ $t('radio') }}
|
||||
</van-radio>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('withCell')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
@ -51,13 +62,15 @@ export default {
|
||||
radio: '单选框',
|
||||
text1: '未选中禁用',
|
||||
text2: '选中且禁用',
|
||||
title3: '与 Cell 组件一起使用'
|
||||
customColor: '自定义颜色',
|
||||
withCell: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
text1: 'Disabled',
|
||||
text2: 'Disabled and checked',
|
||||
title: 'Inside a Cell'
|
||||
customColor: 'Custom Color',
|
||||
withCell: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ Vue.use(Radio);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
Use `v-model` to bind the name of checked radio
|
||||
|
||||
```html
|
||||
@ -39,6 +40,12 @@ export default {
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
#### Custom Color
|
||||
|
||||
```html
|
||||
<van-radio checked-color="#4b0">Radio</van-radio>
|
||||
```
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
```html
|
||||
@ -62,6 +69,7 @@ export default {
|
||||
| disabled | Whether to disable radio | `Boolean` | `false` |
|
||||
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
||||
| label-position | Can be set to `left` | `String` | `right` |
|
||||
| checked-color | Checked color | `String` | `#1989fa` | - |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
|
||||
@ -5,13 +5,16 @@
|
||||
>
|
||||
<span :class="b('input')">
|
||||
<input
|
||||
:value="name"
|
||||
v-model="currentValue"
|
||||
type="radio"
|
||||
:value="name"
|
||||
:class="b('control')"
|
||||
:disabled="isDisabled"
|
||||
>
|
||||
<icon :name="currentValue === name ? 'checked' : 'check'" />
|
||||
<icon
|
||||
:style="iconStyle"
|
||||
:name="checked ? 'checked' : 'check'"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="$slots.default"
|
||||
@ -36,6 +39,7 @@ export default create({
|
||||
name: null,
|
||||
value: null,
|
||||
disabled: Boolean,
|
||||
checkedColor: String,
|
||||
labelDisabled: Boolean,
|
||||
labelPosition: Boolean
|
||||
},
|
||||
@ -51,10 +55,23 @@ export default create({
|
||||
}
|
||||
},
|
||||
|
||||
checked() {
|
||||
return this.currentValue === this.name;
|
||||
},
|
||||
|
||||
isDisabled() {
|
||||
return this.parent
|
||||
? this.parent.disabled || this.disabled
|
||||
: this.disabled;
|
||||
},
|
||||
|
||||
iconStyle() {
|
||||
const { checkedColor } = this;
|
||||
if (checkedColor && this.checked && !this.isDisabled) {
|
||||
return {
|
||||
color: checkedColor
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -14,6 +14,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">
|
||||
单选框
|
||||
</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-radio-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
|
||||
@ -11,6 +11,7 @@ Vue.use(Radio);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值当前选中项的 name
|
||||
|
||||
```html
|
||||
@ -31,6 +32,7 @@ export default {
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
|
||||
|
||||
```html
|
||||
@ -40,7 +42,14 @@ export default {
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-radio checked-color="#4b0">复选框</van-radio>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
```html
|
||||
@ -64,6 +73,7 @@ export default {
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` | 1.1.13 |
|
||||
| label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.13 |
|
||||
| checked-color | 选中状态颜色 | `String` | `#1989fa` | 1.4.5 |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
|
||||
@ -128,7 +128,7 @@ export default {
|
||||
|
||||
#### 切换动画
|
||||
|
||||
通过`animated`属性可以开启切换tab时的动画
|
||||
通过`animated`属性可以开启切换标签内容时的转场动画
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" animated>
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
|
||||
#### 滑动切换
|
||||
|
||||
通过`swipeable`属性可以开启滑动切换tab
|
||||
通过`swipeable`属性可以开启滑动切换标签页
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" swipeable>
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
|
||||
| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
|
||||
| swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
|
||||
| animated | 是否使用动画切换 Tabs | `false` | - | 1.4.5 |
|
||||
| animated | 是否开启切换标签内容时的转场动画 | `false` | - | 1.4.5 |
|
||||
|
||||
### Tab API
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user