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

Radio add border prop

Browse source
This commit is contained in:
梁灏 2019-09-15 11:34:15 +08:00
parent 74e5f493b0
commit e87939165e
3 changed files with 46 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
examples/routers/radio.vue
View file

@ -3,6 +3,10 @@
<Radio size="large" v-model="single">Radio</Radio> <Radio size="large" v-model="single">Radio</Radio>
<Radio size="default" v-model="single">Radio</Radio> <Radio size="default" v-model="single">Radio</Radio>
<Radio size="small" v-model="single">Radio</Radio> <Radio size="small" v-model="single">Radio</Radio>
<br>
<Radio size="large" v-model="single" border>Radio</Radio>
<Radio size="default" v-model="single" border disabled>Radio</Radio>
<Radio size="small" v-model="single" border>Radio</Radio>
<br><br> <br><br>
<Radio-group v-model="phone"> <Radio-group v-model="phone">
<Radio label="apple"> <Radio label="apple">
@ -38,42 +42,42 @@
</Radio-group> </Radio-group>
<Divider></Divider> <Divider></Divider>
<Radio-group v-model="phone" size="small"> <Radio-group v-model="phone" size="small">
<Radio label="apple"> <Radio label="apple" border>
<Icon type="logo-apple"></Icon> <Icon type="logo-apple"></Icon>
<span>选项一</span> <span>选项一</span>
</Radio> </Radio>
<Radio label="android"> <Radio label="android" border>
<Icon type="logo-android"></Icon> <Icon type="logo-android"></Icon>
<span>选项二</span> <span>选项二</span>
</Radio> </Radio>
<Radio label="windows"> <Radio label="windows" border>
<Icon type="logo-windows"></Icon> <Icon type="logo-windows"></Icon>
<span>选项三</span> <span>选项三</span>
</Radio> </Radio>
</Radio-group> </Radio-group>
<br><br> <br><br>
<Radio-group v-model="phone" size="default"> <Radio-group v-model="phone" size="default">
<Radio label="apple"> <Radio label="apple" border>
<span>选项一</span> <span>选项一</span>
</Radio> </Radio>
<Radio label="android"> <Radio label="android" border disabled>
<span>选项二</span> <span>选项二</span>
</Radio> </Radio>
<Radio label="windows"> <Radio label="windows" border>
<span>选项三</span> <span>选项三</span>
</Radio> </Radio>
</Radio-group> </Radio-group>
<br><br> <br><br>
<Radio-group v-model="phone" size="large"> <Radio-group v-model="phone" size="large">
<Radio label="apple"> <Radio label="apple" border>
<Icon type="logo-apple"></Icon> <Icon type="logo-apple"></Icon>
<span>选项一</span> <span>选项一</span>
</Radio> </Radio>
<Radio label="android"> <Radio label="android" border>
<Icon type="logo-android"></Icon> <Icon type="logo-android"></Icon>
<span>选项二</span> <span>选项二</span>
</Radio> </Radio>
<Radio label="windows"> <Radio label="windows" border>
<Icon type="logo-windows"></Icon> <Icon type="logo-windows"></Icon>
<span>选项三</span> <span>选项三</span>
</Radio> </Radio>

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

@ -53,6 +53,11 @@
}, },
name: { name: {
type: String type: String
},
// 4.0.0
border: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -74,7 +79,8 @@
[`${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, [`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-focus`]: this.focusWrapper [`${prefixCls}-focus`]: this.focusWrapper,
[`${prefixCls}-border`]: this.border
} }
]; ];
}, },

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

@ -115,6 +115,32 @@
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
} }
&-border{
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
height: @btn-height-base;
line-height: @btn-height-base - 2px;
padding: @btn-padding-base;
transition: border @transition-time @ease-in-out;
}
&-small&-border, .@{radio-group-prefix-cls}-small &-border{
height: @btn-height-small;
line-height: @btn-height-small - 2px;
padding: @btn-padding-small;
}
&-large&-border, .@{radio-group-prefix-cls}-large &-border{
height: @btn-height-large;
line-height: @btn-height-large - 4px;
padding: @btn-padding-large;
}
}
.@{radio-prefix-cls}-wrapper-checked.@{radio-prefix-cls}-border{
border-color: @primary-color;
}
.@{radio-prefix-cls}-wrapper-disabled.@{radio-prefix-cls}-border{
border-color: @btn-disable-border;
} }
// 选中状态 - Selected state // 选中状态 - Selected state