Commit 4d5454208340462d4a483ccca24205e2e2d66fdf
1 parent
77f1cc2e
Radio add size prop
Showing
5 changed files
with
73 additions
and
21 deletions
Show diff stats
examples/routers/radio.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }} | ||
| 4 | - <Radio-group v-model="date.sex"> | ||
| 5 | - <div v-if="show"> | ||
| 6 | - <Radio label="male" true-value="true" false-value="false"></Radio> | ||
| 7 | - <Radio label="female" true-value="true" false-value="false"></Radio> | ||
| 8 | - </div> | 3 | + <Radio size="large" v-model="single">Radio</Radio> |
| 4 | + <Radio size="default" v-model="single">Radio</Radio> | ||
| 5 | + <Radio size="small" v-model="single">Radio</Radio> | ||
| 6 | + <br><br> | ||
| 7 | + <Radio-group v-model="phone"> | ||
| 8 | + <Radio label="apple"> | ||
| 9 | + <Icon type="social-apple"></Icon> | ||
| 10 | + <span>Apple</span> | ||
| 11 | + </Radio> | ||
| 12 | + <Radio label="android"> | ||
| 13 | + <Icon type="social-android"></Icon> | ||
| 14 | + <span>Android</span> | ||
| 15 | + </Radio> | ||
| 16 | + <Radio label="windows"> | ||
| 17 | + <Icon type="social-windows"></Icon> | ||
| 18 | + <span>Windows</span> | ||
| 19 | + </Radio> | ||
| 20 | + </Radio-group> | ||
| 21 | + <Radio-group v-model="button2" type="button" size="large"> | ||
| 22 | + <Radio label="北京"></Radio> | ||
| 23 | + <Radio label="上海" disabled></Radio> | ||
| 24 | + <Radio label="深圳"></Radio> | ||
| 25 | + <Radio label="杭州"></Radio> | ||
| 26 | + </Radio-group> | ||
| 27 | + <Radio-group v-model="button2" type="button" size="default"> | ||
| 28 | + <Radio label="北京"></Radio> | ||
| 29 | + <Radio label="上海" disabled></Radio> | ||
| 30 | + <Radio label="深圳"></Radio> | ||
| 31 | + <Radio label="杭州"></Radio> | ||
| 32 | + </Radio-group> | ||
| 33 | + <Radio-group v-model="button2" type="button" size="small"> | ||
| 34 | + <Radio label="北京"></Radio> | ||
| 35 | + <Radio label="上海" disabled></Radio> | ||
| 36 | + <Radio label="深圳"></Radio> | ||
| 37 | + <Radio label="杭州"></Radio> | ||
| 9 | </Radio-group> | 38 | </Radio-group> |
| 10 | - {{ date }} | ||
| 11 | - <Button @click="handleChange">change</Button> | ||
| 12 | </div> | 39 | </div> |
| 13 | </template> | 40 | </template> |
| 14 | <script> | 41 | <script> |
| 15 | export default { | 42 | export default { |
| 16 | data () { | 43 | data () { |
| 17 | return { | 44 | return { |
| 18 | - date: { | ||
| 19 | - sex: 'male' | ||
| 20 | - }, | ||
| 21 | - show: false, | ||
| 22 | - testValue: null | 45 | + single: true, |
| 46 | + phone: 'apple', | ||
| 47 | + button2: '北京', | ||
| 23 | } | 48 | } |
| 24 | }, | 49 | }, |
| 25 | methods: { | 50 | methods: { |
| 26 | - handleChange () { | ||
| 27 | -// this.date.sex = 'male form'; | ||
| 28 | - this.show = true; | ||
| 29 | - } | 51 | + |
| 30 | } | 52 | } |
| 31 | } | 53 | } |
| 32 | </script> | 54 | </script> |
src/components/radio/radio-group.vue
| @@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
| 19 | }, | 19 | }, |
| 20 | size: { | 20 | size: { |
| 21 | validator (value) { | 21 | validator (value) { |
| 22 | - return oneOf(value, ['small', 'large']); | 22 | + return oneOf(value, ['small', 'large', 'default']); |
| 23 | } | 23 | } |
| 24 | }, | 24 | }, |
| 25 | type: { | 25 | type: { |
| @@ -44,6 +44,7 @@ | @@ -44,6 +44,7 @@ | ||
| 44 | `${prefixCls}`, | 44 | `${prefixCls}`, |
| 45 | { | 45 | { |
| 46 | [`${prefixCls}-${this.size}`]: !!this.size, | 46 | [`${prefixCls}-${this.size}`]: !!this.size, |
| 47 | + [`ivu-radio-${this.size}`]: !!this.size, | ||
| 47 | [`${prefixCls}-${this.type}`]: !!this.type, | 48 | [`${prefixCls}-${this.type}`]: !!this.type, |
| 48 | [`${prefixCls}-vertical`]: this.vertical | 49 | [`${prefixCls}-vertical`]: this.vertical |
| 49 | } | 50 | } |
src/components/radio/radio.vue
| @@ -12,7 +12,7 @@ | @@ -12,7 +12,7 @@ | ||
| 12 | </label> | 12 | </label> |
| 13 | </template> | 13 | </template> |
| 14 | <script> | 14 | <script> |
| 15 | - import { findComponentUpward } from '../../utils/assist'; | 15 | + import { findComponentUpward, oneOf } from '../../utils/assist'; |
| 16 | import Emitter from '../../mixins/emitter'; | 16 | import Emitter from '../../mixins/emitter'; |
| 17 | 17 | ||
| 18 | const prefixCls = 'ivu-radio'; | 18 | const prefixCls = 'ivu-radio'; |
| @@ -39,6 +39,11 @@ | @@ -39,6 +39,11 @@ | ||
| 39 | disabled: { | 39 | disabled: { |
| 40 | type: Boolean, | 40 | type: Boolean, |
| 41 | default: false | 41 | default: false |
| 42 | + }, | ||
| 43 | + size: { | ||
| 44 | + validator (value) { | ||
| 45 | + return oneOf(value, ['small', 'large', 'default']); | ||
| 46 | + } | ||
| 42 | } | 47 | } |
| 43 | }, | 48 | }, |
| 44 | data () { | 49 | data () { |
| @@ -55,7 +60,8 @@ | @@ -55,7 +60,8 @@ | ||
| 55 | { | 60 | { |
| 56 | [`${prefixCls}-group-item`]: this.group, | 61 | [`${prefixCls}-group-item`]: this.group, |
| 57 | [`${prefixCls}-wrapper-checked`]: this.currentValue, | 62 | [`${prefixCls}-wrapper-checked`]: this.currentValue, |
| 58 | - [`${prefixCls}-wrapper-disabled`]: this.disabled | 63 | + [`${prefixCls}-wrapper-disabled`]: this.disabled, |
| 64 | + [`${prefixCls}-${this.size}`]: !!this.size | ||
| 59 | } | 65 | } |
| 60 | ]; | 66 | ]; |
| 61 | }, | 67 | }, |
src/styles/components/radio.less
| @@ -73,6 +73,30 @@ | @@ -73,6 +73,30 @@ | ||
| 73 | transform: scale(0); | 73 | transform: scale(0); |
| 74 | } | 74 | } |
| 75 | } | 75 | } |
| 76 | + &-large{ | ||
| 77 | + font-size: @font-size-base; | ||
| 78 | + & .@{radio-inner-prefix-cls}{ | ||
| 79 | + width: 16px; | ||
| 80 | + height: 16px; | ||
| 81 | + &:after{ | ||
| 82 | + width: 10px; | ||
| 83 | + height: 10px; | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + &.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{ | ||
| 87 | + font-size: @font-size-base; | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + &-small{ | ||
| 91 | + & .@{radio-inner-prefix-cls}{ | ||
| 92 | + width: 12px; | ||
| 93 | + height: 12px; | ||
| 94 | + &:after{ | ||
| 95 | + width: 6px; | ||
| 96 | + height: 6px; | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | + } | ||
| 76 | 100 | ||
| 77 | &-input { | 101 | &-input { |
| 78 | position: absolute; | 102 | position: absolute; |
src/styles/mixins/checkbox.less