drip-public/iview
6
1
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
Show stats 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="default" 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>
<Radio-group v-model="phone">
<Radio label="apple">
@ -38,42 +42,42 @@
</Radio-group>
<Divider></Divider>
<Radio-group v-model="phone" size="small">
<Radio label="apple">
<Radio label="apple" border>
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android">
<Radio label="android" border>
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows">
<Radio label="windows" border>
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="default">
<Radio label="apple">
<Radio label="apple" border>
<span>选项一</span>
</Radio>
<Radio label="android">
<Radio label="android" border disabled>
<span>选项二</span>
</Radio>
<Radio label="windows">
<Radio label="windows" border>
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="large">
<Radio label="apple">
<Radio label="apple" border>
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android">
<Radio label="android" border>
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows">
<Radio label="windows" border>
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>

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

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