Radio add size prop

This commit is contained in:
梁灏 2017-08-24 17:50:30 +08:00
parent 77f1cc2e34
commit 4d54542083
5 changed files with 73 additions and 21 deletions

View file

@ -1,32 +1,54 @@
<template> <template>
<div> <div>
<Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }} <Radio size="large" v-model="single">Radio</Radio>
<Radio-group v-model="date.sex"> <Radio size="default" v-model="single">Radio</Radio>
<div v-if="show"> <Radio size="small" v-model="single">Radio</Radio>
<Radio label="male" true-value="true" false-value="false"></Radio> <br><br>
<Radio label="female" true-value="true" false-value="false"></Radio> <Radio-group v-model="phone">
</div> <Radio label="apple">
<Icon type="social-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio label="android">
<Icon type="social-android"></Icon>
<span>Android</span>
</Radio>
<Radio label="windows">
<Icon type="social-windows"></Icon>
<span>Windows</span>
</Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="large">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="default">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Radio-group v-model="button2" type="button" size="small">
<Radio label="北京"></Radio>
<Radio label="上海" disabled></Radio>
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group> </Radio-group>
{{ date }}
<Button @click="handleChange">change</Button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
date: { single: true,
sex: 'male' phone: 'apple',
}, button2: '北京',
show: false,
testValue: null
} }
}, },
methods: { methods: {
handleChange () {
// this.date.sex = 'male form';
this.show = true;
}
} }
} }
</script> </script>

View file

@ -19,7 +19,7 @@
}, },
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large']); return oneOf(value, ['small', 'large', 'default']);
} }
}, },
type: { type: {
@ -44,6 +44,7 @@
`${prefixCls}`, `${prefixCls}`,
{ {
[`${prefixCls}-${this.size}`]: !!this.size, [`${prefixCls}-${this.size}`]: !!this.size,
[`ivu-radio-${this.size}`]: !!this.size,
[`${prefixCls}-${this.type}`]: !!this.type, [`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-vertical`]: this.vertical [`${prefixCls}-vertical`]: this.vertical
} }

View file

@ -12,7 +12,7 @@
</label> </label>
</template> </template>
<script> <script>
import { findComponentUpward } from '../../utils/assist'; import { findComponentUpward, oneOf } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-radio'; const prefixCls = 'ivu-radio';
@ -39,6 +39,11 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
} }
}, },
data () { data () {
@ -55,7 +60,8 @@
{ {
[`${prefixCls}-group-item`]: this.group, [`${prefixCls}-group-item`]: this.group,
[`${prefixCls}-wrapper-checked`]: this.currentValue, [`${prefixCls}-wrapper-checked`]: this.currentValue,
[`${prefixCls}-wrapper-disabled`]: this.disabled [`${prefixCls}-wrapper-disabled`]: this.disabled,
[`${prefixCls}-${this.size}`]: !!this.size
} }
]; ];
}, },

View file

@ -73,6 +73,30 @@
transform: scale(0); transform: scale(0);
} }
} }
&-large{
font-size: @font-size-base;
& .@{radio-inner-prefix-cls}{
width: 16px;
height: 16px;
&:after{
width: 10px;
height: 10px;
}
}
&.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
font-size: @font-size-base;
}
}
&-small{
& .@{radio-inner-prefix-cls}{
width: 12px;
height: 12px;
&:after{
width: 6px;
height: 6px;
}
}
}
&-input { &-input {
position: absolute; position: absolute;

View file

@ -49,7 +49,6 @@
} }
} }
&-large{ &-large{
font-size: 16px;
& .@{checkbox-inner-prefix-cls} { & .@{checkbox-inner-prefix-cls} {
width: 16px; width: 16px;
height: 16px; height: 16px;