chenhaodong / mew-iview

Commit 77f1cc2e34b4371c24d4b9cbfaa6e426b83cf407

Authored by 梁灏
1 parent 3485243a

Checkbox add size prop

Showing 5 changed files with 99 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/checkbox.vue
  Show/Hide comments   View file @77f1cc2
1 1 <template>
2 2 <div>
  3 + <Checkbox
  4 + :indeterminate="true"
  5 + :value="false"
  6 + size="large">全选</Checkbox>
  7 + <Checkbox
  8 + :indeterminate="true"
  9 + :value="false"
  10 + size="default">全选</Checkbox>
  11 + <Checkbox
  12 + :indeterminate="true"
  13 + :value="false"
  14 + size="small">全选</Checkbox>
3 15 <div>
4   - <Checkbox true-value="true" false-value="false" v-model="testValue1">test string</Checkbox>
  16 + <Checkbox size="large" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
  17 + <Checkbox true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
  18 + <Checkbox size="small" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
5 19 {{ testValue1 }}
6 20 </div>
7 21 <div>
8 22 <Checkbox :true-value="0" :false-value="1" v-model="testValue2">test number</Checkbox>
9 23 {{ testValue2 }}
10 24 </div>
11   - <Checkbox-group v-model="fruit">
  25 + <Checkbox-group v-model="fruit" size="large">
12 26 <Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
13 27 </Checkbox-group>
14 28 <div>{{ fruit }}</div>
... ...
src/components/button/button.vue
  Show/Hide comments   View file @77f1cc2
... ... @@ -27,7 +27,7 @@
27 27 },
28 28 size: {
29 29 validator (value) {
30   - return oneOf(value, ['small', 'large']);
  30 + return oneOf(value, ['small', 'large', 'default']);
31 31 }
32 32 },
33 33 loading: Boolean,
... ...
src/components/checkbox/checkbox-group.vue
  Show/Hide comments   View file @77f1cc2
... ... @@ -4,7 +4,7 @@
4 4 </div>
5 5 </template>
6 6 <script>
7   - import { findComponentsDownward } from '../../utils/assist';
  7 + import { findComponentsDownward, oneOf } from '../../utils/assist';
8 8 import Emitter from '../../mixins/emitter';
9 9 const prefixCls = 'ivu-checkbox-group';
10 10  
... ... @@ -17,6 +17,11 @@
17 17 default () {
18 18 return [];
19 19 }
  20 + },
  21 + size: {
  22 + validator (value) {
  23 + return oneOf(value, ['small', 'large', 'default']);
  24 + }
20 25 }
21 26 },
22 27 data () {
... ... @@ -27,7 +32,12 @@
27 32 },
28 33 computed: {
29 34 classes () {
30   - return `${prefixCls}`;
  35 + return [
  36 + `${prefixCls}`,
  37 + {
  38 + [`ivu-checkbox-${this.size}`]: !!this.size
  39 + }
  40 + ];
31 41 }
32 42 },
33 43 mounted () {
... ...
src/components/checkbox/checkbox.vue
  Show/Hide comments   View file @77f1cc2
... ... @@ -22,7 +22,7 @@
22 22 </label>
23 23 </template>
24 24 <script>
25   - import { findComponentUpward } from '../../utils/assist';
  25 + import { findComponentUpward, oneOf } from '../../utils/assist';
26 26 import Emitter from '../../mixins/emitter';
27 27  
28 28 const prefixCls = 'ivu-checkbox';
... ... @@ -53,6 +53,11 @@
53 53 indeterminate: {
54 54 type: Boolean,
55 55 default: false
  56 + },
  57 + size: {
  58 + validator (value) {
  59 + return oneOf(value, ['small', 'large', 'default']);
  60 + }
56 61 }
57 62 },
58 63 data () {
... ... @@ -71,7 +76,8 @@
71 76 {
72 77 [`${prefixCls}-group-item`]: this.group,
73 78 [`${prefixCls}-wrapper-checked`]: this.currentValue,
74   - [`${prefixCls}-wrapper-disabled`]: this.disabled
  79 + [`${prefixCls}-wrapper-disabled`]: this.disabled,
  80 + [`${prefixCls}-${this.size}`]: !!this.size
75 81 }
76 82 ];
77 83 },
... ...
src/styles/mixins/checkbox.less
  Show/Hide comments   View file @77f1cc2
... ... @@ -48,6 +48,28 @@
48 48 transition: all @transition-time @ease-in-out;
49 49 }
50 50 }
  51 + &-large{
  52 + font-size: 16px;
  53 + & .@{checkbox-inner-prefix-cls} {
  54 + width: 16px;
  55 + height: 16px;
  56 + &:after{
  57 + width: 5px;
  58 + height: 9px;
  59 + }
  60 + }
  61 + }
  62 + &-small{
  63 + font-size: 12px;
  64 + & .@{checkbox-inner-prefix-cls} {
  65 + width: 12px;
  66 + height: 12px;
  67 + &:after{
  68 + top: 0;
  69 + left: 3px;
  70 + }
  71 + }
  72 + }
51 73  
52 74 &-input {
53 75 width: 100%;
... ... @@ -96,6 +118,26 @@
96 118 }
97 119 }
98 120 }
  121 + .@{checkbox-prefix-cls}-large{
  122 + .@{checkbox-prefix-cls}-checked{
  123 + .@{checkbox-inner-prefix-cls} {
  124 + &:after{
  125 + width: 5px;
  126 + height: 9px;
  127 + }
  128 + }
  129 + }
  130 + }
  131 + .@{checkbox-prefix-cls}-small{
  132 + .@{checkbox-prefix-cls}-checked{
  133 + .@{checkbox-inner-prefix-cls} {
  134 + &:after{
  135 + top: 0;
  136 + left: 3px;
  137 + }
  138 + }
  139 + }
  140 + }
99 141  
100 142 // 禁用
101 143 .@{checkbox-prefix-cls}-disabled {
... ... @@ -164,6 +206,22 @@
164 206 border-color: @primary-color;
165 207 }
166 208 }
  209 + .@{checkbox-prefix-cls}-large {
  210 + .@{checkbox-prefix-cls}-indeterminate{
  211 + .@{checkbox-inner-prefix-cls}:after{
  212 + width: 10px;
  213 + top: 6px;
  214 + }
  215 + }
  216 + }
  217 + .@{checkbox-prefix-cls}-small {
  218 + .@{checkbox-prefix-cls}-indeterminate{
  219 + .@{checkbox-inner-prefix-cls}:after{
  220 + width: 6px;
  221 + top: 4px;
  222 + }
  223 + }
  224 + }
167 225  
168 226 .@{checkbox-prefix-cls}-wrapper {
169 227 cursor: pointer;
... ... @@ -173,6 +231,10 @@
173 231 &-disabled{
174 232 cursor: @cursor-disabled;
175 233 }
  234 +
  235 + &.@{checkbox-prefix-cls}-large{
  236 + font-size: @font-size-base;
  237 + }
176 238 }
177 239  
178 240 .@{checkbox-prefix-cls}-wrapper + span,
... ...