Commit 5722a6fb91700a246221fdb6a331416fc3022f80
1 parent
a404bbae
RadioGroup add vertical props
RadioGroup add vertical props
Showing
4 changed files
with
20 additions
and
10 deletions
Show diff stats
src/components/radio/radio-group.vue
| ... | ... | @@ -24,6 +24,10 @@ |
| 24 | 24 | validator (value) { |
| 25 | 25 | return oneOf(value, ['button']); |
| 26 | 26 | } |
| 27 | + }, | |
| 28 | + vertical: { | |
| 29 | + type: Boolean, | |
| 30 | + default: false | |
| 27 | 31 | } |
| 28 | 32 | }, |
| 29 | 33 | computed: { |
| ... | ... | @@ -32,7 +36,8 @@ |
| 32 | 36 | `${prefixCls}`, |
| 33 | 37 | { |
| 34 | 38 | [`${prefixCls}-${this.size}`]: !!this.size, |
| 35 | - [`${prefixCls}-${this.type}`]: !!this.type | |
| 39 | + [`${prefixCls}-${this.type}`]: !!this.type, | |
| 40 | + [`${prefixCls}-vertical`]: this.vertical | |
| 36 | 41 | } |
| 37 | 42 | ]; |
| 38 | 43 | } | ... | ... |
src/styles/components/radio.less
| ... | ... | @@ -6,6 +6,13 @@ |
| 6 | 6 | .@{radio-group-prefix-cls} { |
| 7 | 7 | display: inline-block; |
| 8 | 8 | font-size: @font-size-small; |
| 9 | + &-vertical{ | |
| 10 | + .@{radio-prefix-cls}-wrapper { | |
| 11 | + display: block; | |
| 12 | + height: 30px; | |
| 13 | + line-height: 30px; | |
| 14 | + } | |
| 15 | + } | |
| 9 | 16 | } |
| 10 | 17 | |
| 11 | 18 | // 普通状态 |
| ... | ... | @@ -16,6 +23,10 @@ |
| 16 | 23 | position: relative; |
| 17 | 24 | white-space: nowrap; |
| 18 | 25 | margin-right: 8px; |
| 26 | + cursor: pointer; | |
| 27 | + &-disabled{ | |
| 28 | + cursor: @cursor-disabled; | |
| 29 | + } | |
| 19 | 30 | } |
| 20 | 31 | |
| 21 | 32 | .@{radio-prefix-cls} { | ... | ... |
test/routers/radio.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | - <Checkbox>hello</Checkbox> | |
| 4 | - <Radio-group :model.sync="phone"> | |
| 3 | + <Radio-group :model.sync="phone" vertical> | |
| 5 | 4 | <Radio value="apple"> |
| 6 | 5 | <Icon type="social-apple"></Icon> |
| 7 | 6 | <span>Apple</span> |
| ... | ... | @@ -27,7 +26,7 @@ |
| 27 | 26 | <i-button @click="radio = !radio">change radio</i-button> |
| 28 | 27 | <br> |
| 29 | 28 | <br> |
| 30 | - <Radio-group :model.sync="phone" type="button"> | |
| 29 | + <Radio-group :model.sync="phone" type="button" vertical> | |
| 31 | 30 | <Radio value="apple"> |
| 32 | 31 | <Icon type="social-apple"></Icon> |
| 33 | 32 | <span>Apple</span> | ... | ... |
test/routers/table.vue
| 1 | -<style> | |
| 2 | - body{ | |
| 3 | - overflow: hidden; | |
| 4 | - } | |
| 5 | -</style> | |
| 6 | 1 | <template> |
| 7 | 2 | <i-table border :columns="columns1" :data="data1"></i-table> |
| 8 | - <i-table border height="200" :columns="columns1" :data="data2"></i-table> | |
| 3 | + <!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>--> | |
| 9 | 4 | <!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>--> |
| 10 | 5 | <!--<i-button @click="changeFilter">改变filter</i-button>--> |
| 11 | 6 | <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>--> | ... | ... |