mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Radio: add shape prop & icon slot (#2651)
This commit is contained in:
neverland
GitHub
parent
01c893abcb
commit
76e23aefc6
@ -7,13 +7,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-radio-group">
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" 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"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>
|
||||
</div>
|
||||
@ -21,7 +27,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>
|
||||
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
|
||||
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| name | Checkbox name | `any` | - |
|
||||
| shape | Can be set to `round` `square` | `String` | `round` |
|
||||
| shape | Can be set to `square` | `String` | `round` |
|
||||
| v-model | Check status | `Boolean` | `false` |
|
||||
| disabled | Diable checkbox | `Boolean` | `false` |
|
||||
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
||||
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### Checkbox Slot
|
||||
### Checkbox 插槽
|
||||
|
||||
| 名称 | 说明 | slot-scope |
|
||||
|------|------|------|
|
||||
|
||||
@ -13,7 +13,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-radio-group van-contact-list__group">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
|
||||
<!----></i>
|
||||
</div>
|
||||
|
||||
@ -32,6 +32,21 @@
|
||||
</van-radio>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-radio
|
||||
name="1"
|
||||
value="1"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
{{ $t('customIcon') }}
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('withCell')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-cell-group>
|
||||
@ -62,6 +77,7 @@ export default {
|
||||
radio: '单选框',
|
||||
text1: '未选中禁用',
|
||||
text2: '选中且禁用',
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
withCell: '与 Cell 组件一起使用'
|
||||
},
|
||||
@ -69,6 +85,7 @@ export default {
|
||||
radio: 'Radio',
|
||||
text1: 'Disabled',
|
||||
text2: 'Disabled and checked',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
withCell: 'Inside a Cell'
|
||||
}
|
||||
@ -78,7 +95,11 @@ export default {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1'
|
||||
radio3: '1',
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -93,5 +114,9 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,6 +46,33 @@ export default {
|
||||
<van-radio checked-color="#07c160">Radio</van-radio>
|
||||
```
|
||||
|
||||
#### Custom Icon
|
||||
|
||||
Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
<van-radio v-model="checked">
|
||||
Custom Icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
```html
|
||||
@ -66,11 +93,13 @@ export default {
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| name | Radio name | `any` | - |
|
||||
| shape | Can be set to `square` | `String` | `round` |
|
||||
| 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
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
@ -83,3 +112,10 @@ export default {
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | current value |
|
||||
|
||||
### Radio Slot
|
||||
|
||||
| Name | Description | slot-scope |
|
||||
|------|------|------|
|
||||
| - | Custom label | - |
|
||||
| icon | Custom icon | checked: whether to be checked |
|
||||
|
||||
@ -13,7 +13,11 @@ export default sfc({
|
||||
disabled: Boolean,
|
||||
checkedColor: String,
|
||||
labelPosition: String,
|
||||
labelDisabled: Boolean
|
||||
labelDisabled: Boolean,
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'round'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -29,6 +33,16 @@ export default sfc({
|
||||
|
||||
isDisabled() {
|
||||
return this.parent ? this.parent.disabled || this.disabled : this.disabled;
|
||||
},
|
||||
|
||||
iconStyle() {
|
||||
const { checkedColor } = this;
|
||||
if (checkedColor && this.currentValue === this.name && !this.isDisabled) {
|
||||
return {
|
||||
borderColor: checkedColor,
|
||||
backgroundColor: checkedColor
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -37,6 +51,12 @@ export default sfc({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
if (!this.isDisabled) {
|
||||
this.currentValue = this.name;
|
||||
}
|
||||
},
|
||||
|
||||
onClickLabel() {
|
||||
if (!this.isDisabled && !this.labelDisabled) {
|
||||
this.currentValue = this.name;
|
||||
@ -46,31 +66,35 @@ export default sfc({
|
||||
|
||||
render(h) {
|
||||
const checked = this.currentValue === this.name;
|
||||
const { isDisabled, checkedColor } = this;
|
||||
const iconStyle = checkedColor && checked && !isDisabled && { color: checkedColor };
|
||||
const CheckIcon = this.$scopedSlots.icon ? (
|
||||
this.$scopedSlots.icon({ checked })
|
||||
) : (
|
||||
<Icon name="success" style={this.iconStyle} />
|
||||
);
|
||||
|
||||
const Label = this.$slots.default && (
|
||||
<span
|
||||
class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
|
||||
onClick={this.onClickLabel}
|
||||
>
|
||||
{this.$slots.default}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
class={bem({ disabled: isDisabled })}
|
||||
class={bem()}
|
||||
onClick={() => {
|
||||
this.$emit('click');
|
||||
}}
|
||||
>
|
||||
<span class={bem('input')}>
|
||||
<input
|
||||
vModel={this.currentValue}
|
||||
type="radio"
|
||||
class={bem('control')}
|
||||
value={this.name}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
<Icon style={iconStyle} name={checked ? 'checked' : 'circle'} />
|
||||
</span>
|
||||
{this.$slots.default && (
|
||||
<span class={bem('label', this.labelPosition)} onClick={this.onClickLabel}>
|
||||
{this.$slots.default}
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
|
||||
onClick={this.onClickIcon}
|
||||
>
|
||||
{CheckIcon}
|
||||
</div>
|
||||
{Label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,56 +4,67 @@
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
&__input,
|
||||
&__icon,
|
||||
&__label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: @radio-size;
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 1em;
|
||||
position: relative;
|
||||
font-size: @radio-size;
|
||||
}
|
||||
&__icon {
|
||||
height: @radio-size;
|
||||
|
||||
&__control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.van-icon {
|
||||
font-size: 14px;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
width: @radio-size;
|
||||
height: @radio-size;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @radio-border-color;
|
||||
transition: @radio-transition-duration;
|
||||
}
|
||||
|
||||
&--round {
|
||||
.van-icon {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--checked {
|
||||
.van-icon {
|
||||
color: @white;
|
||||
border-color: @radio-checked-icon-color;
|
||||
background-color: @radio-checked-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon {
|
||||
border-color: @radio-disabled-icon-color;
|
||||
background-color: @radio-disabled-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled&--checked {
|
||||
.van-icon {
|
||||
color: @radio-disabled-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
line-height: @radio-size;
|
||||
margin-left: 10px;
|
||||
color: @radio-label-color;
|
||||
margin-left: @radio-label-margin;
|
||||
|
||||
&--left {
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
margin: 0 @radio-label-margin 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
width: 1em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.van-icon-circle {
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-icon {
|
||||
color: @gray-light;
|
||||
border-radius: 100%;
|
||||
background-color: @background-color;
|
||||
&--disabled {
|
||||
color: @radio-disabled-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,20 +4,42 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="demo-radio-group van-radio-group">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" 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">单选框 1</span></div>
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label">单选框 1</span>
|
||||
</div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label">单选框 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-radio-group van-radio-group">
|
||||
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
|
||||
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" 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 class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
|
||||
</div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:#07c160;font-size:undefined;"><!----></i></span><span class="van-radio__label">
|
||||
<div class="demo-radio-group van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#07c160;background-color:#07c160;">
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框
|
||||
</span></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-radio-group van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
|
||||
自定义图标
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-radio-group">
|
||||
@ -25,13 +47,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单选框1</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单选框2</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span></div>
|
||||
<div class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
45
packages/radio/test/index.spec.js
Normal file
45
packages/radio/test/index.spec.js
Normal file
@ -0,0 +1,45 @@
|
||||
import Radio from '..';
|
||||
import RadioGroup from '../../radio-group';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('radio-group change', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<radio-group v-model="result" @change="$emit('change', $event)">
|
||||
<radio
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
:disabled="item === 'd'"
|
||||
>
|
||||
label
|
||||
</radio>
|
||||
</radio-group>
|
||||
`,
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: 'a',
|
||||
list: ['a', 'b', 'c', 'd']
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const icons = wrapper.findAll('.van-radio__icon');
|
||||
const labels = wrapper.findAll('.van-radio__label');
|
||||
|
||||
icons.at(2).trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('c');
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual('c');
|
||||
|
||||
labels.at(1).trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
expect(wrapper.emitted('change')[1][0]).toEqual('b');
|
||||
|
||||
icons.at(3).trigger('click');
|
||||
labels.at(3).trigger('click');
|
||||
expect(wrapper.vm.result).toEqual('b');
|
||||
});
|
||||
@ -48,6 +48,33 @@ export default {
|
||||
<van-radio checked-color="#07c160">复选框</van-radio>
|
||||
```
|
||||
|
||||
#### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
|
||||
|
||||
```html
|
||||
<van-radio v-model="checked">
|
||||
自定义图标
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
@ -70,6 +97,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| name | 标识符 | 任意类型 | - | - |
|
||||
| shape | 形状，可选值为 `square` | `String` | `round` | 1.5.8 |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` | 1.1.13 |
|
||||
| label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.13 |
|
||||
@ -87,3 +115,10 @@ export default {
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前选中项的 name |
|
||||
|
||||
### Radio 插槽
|
||||
|
||||
| 名称 | 说明 | slot-scope |
|
||||
|------|------|------|
|
||||
| - | 自定义文本 | - |
|
||||
| icon | 自定义图标 | checked: 是否为选中状态 |
|
||||
|
||||
@ -97,6 +97,14 @@
|
||||
|
||||
// Radio
|
||||
@radio-size: 20px;
|
||||
@radio-border-color: @gray-light;
|
||||
@radio-transition-duration: .2s;
|
||||
@radio-label-margin: 10px;
|
||||
@radio-label-color: @text-color;
|
||||
@radio-checked-icon-color: @blue;
|
||||
@radio-disabled-icon-color: @gray;
|
||||
@radio-disabled-label-color: @gray;
|
||||
@radio-disabled-background-color: @border-color;
|
||||
|
||||
// Swipe
|
||||
@swipe-indicator: 6px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user