drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Radio add size prop

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

56
examples/routers/radio.vue
View file

@ -1,32 +1,54 @@
<template>
<div>
<Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }}
<Radio-group v-model="date.sex">
<div v-if="show">
<Radio label="male" true-value="true" false-value="false"></Radio>
<Radio label="female" true-value="true" false-value="false"></Radio>
</div>
<Radio size="large" v-model="single">Radio</Radio>
<Radio size="default" v-model="single">Radio</Radio>
<Radio size="small" v-model="single">Radio</Radio>
<br><br>
<Radio-group v-model="phone">
<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>
{{ date }}
<Button @click="handleChange">change</Button>
</div>
</template>
<script>
export default {
data () {
return {
date: {
sex: 'male'
},
show: false,
testValue: null
single: true,
phone: 'apple',
button2: '北京',
}
},
methods: {
handleChange () {
// this.date.sex = 'male form';
this.show = true;
}
}
}
</script>

3
src/components/radio/radio-group.vue
View file

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

10
src/components/radio/radio.vue
View file

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

24
src/styles/components/radio.less
View file

@ -73,6 +73,30 @@
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 {
position: absolute;

1
src/styles/mixins/checkbox.less
View file

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