other / mew-iview

Commit cbe03a12b2f4a79311b6e7a95d13811ae3a41a92

Authored by 梁灏
1 parent 06322514

support Checkbox 

support Checkbox
Showing 10 changed files with 146 additions and 29 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @cbe03a1
... ... @@ -4,3 +4,7 @@
4 4 使用 v-model
5 5 ### Radio
6 6 value 改为了 label，使用 v-model，废弃 checked
  7 +### Checkbox
  8 +使用 v-model
  9 +### CheckboxGroup
  10 +value 改为了 label，使用 v-model，废弃 checked
7 11 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @cbe03a1
... ... @@ -22,7 +22,7 @@
22 22 - [x] Icon
23 23 - [x] Input
24 24 - [x] Radio
25   -- [ ] Checkbox
  25 +- [x] Checkbox
26 26 - [ ] Switch
27 27 - [ ] Table
28 28 - [ ] Select
... ...
src/components/checkbox/checkbox-group.vue
  Show/Hide comments   View file @cbe03a1
... ... @@ -9,42 +9,49 @@
9 9 export default {
10 10 name: 'checkboxGroup',
11 11 props: {
12   - model: {
  12 + value: {
13 13 type: Array,
14 14 default () {
15 15 return [];
16 16 }
17 17 }
18 18 },
  19 + data () {
  20 + return {
  21 + currentValue: this.value
  22 + };
  23 + },
19 24 computed: {
20 25 classes () {
21 26 return `${prefixCls}`;
22 27 }
23 28 },
24   - compiled () {
  29 + mounted () {
25 30 this.updateModel(true);
26 31 },
27 32 methods: {
28 33 updateModel (update) {
29   - const model = this.model;
  34 + const value = this.value;
30 35  
31 36 this.$children.forEach((child) => {
32   - child.model = model;
  37 + child.model = value;
33 38  
34 39 if (update) {
35   - child.selected = model.indexOf(child.value) >= 0;
  40 + child.currentValue = value.indexOf(child.label) >= 0;
36 41 child.group = true;
37 42 }
38 43 });
39 44 },
40 45 change (data) {
41   - this.model = data;
  46 + this.currentValue = data;
  47 + this.$emit('input', data);
42 48 this.$emit('on-change', data);
43   - this.$dispatch('on-form-change', data);
  49 + // todo 事件
  50 +// this.$dispatch('on-form-change', data);
44 51 }
45 52 },
46 53 watch: {
47   - model () {
  54 + value () {
48 55 this.updateModel(true);
49 56 }
50 57 }
... ...
src/components/checkbox/checkbox.vue
  Show/Hide comments   View file @cbe03a1
... ... @@ -7,7 +7,7 @@
7 7 type="checkbox"
8 8 :class="inputClasses"
9 9 :disabled="disabled"
10   - :value="value"
  10 + :value="label"
11 11 v-model="model"
12 12 @change="change">
13 13 <input
... ... @@ -15,28 +15,29 @@
15 15 type="checkbox"
16 16 :class="inputClasses"
17 17 :disabled="disabled"
18   - v-model="checked"
  18 + :checked="currentValue"
19 19 @change="change">
20 20 </span>
21   - <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
  21 + <slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot>
22 22 </label>
23 23 </template>
24 24 <script>
25 25 const prefixCls = 'ivu-checkbox';
26 26  
27 27 export default {
  28 + name: 'Checkbox',
28 29 props: {
29 30 disabled: {
30 31 type: Boolean,
31 32 default: false
32 33 },
33 34 value: {
34   - type: [String, Number, Boolean]
35   - },
36   - checked: {
37 35 type: Boolean,
38 36 default: false
39 37 },
  38 + label: {
  39 + type: [String, Number, Boolean]
  40 + },
40 41 indeterminate: {
41 42 type: Boolean,
42 43 default: false
... ... @@ -45,7 +46,7 @@
45 46 data () {
46 47 return {
47 48 model: [],
48   - selected: false,
  49 + currentValue: this.value,
49 50 group: false,
50 51 showSlot: true
51 52 };
... ... @@ -56,7 +57,7 @@
56 57 `${prefixCls}-wrapper`,
57 58 {
58 59 [`${prefixCls}-group-item`]: this.group,
59   - [`${prefixCls}-wrapper-checked`]: this.selected,
  60 + [`${prefixCls}-wrapper-checked`]: this.currentValue,
60 61 [`${prefixCls}-wrapper-disabled`]: this.disabled
61 62 }
62 63 ];
... ... @@ -65,7 +66,7 @@
65 66 return [
66 67 `${prefixCls}`,
67 68 {
68   - [`${prefixCls}-checked`]: this.selected,
  69 + [`${prefixCls}-checked`]: this.currentValue,
69 70 [`${prefixCls}-disabled`]: this.disabled,
70 71 [`${prefixCls}-indeterminate`]: this.indeterminate
71 72 }
... ... @@ -78,11 +79,12 @@
78 79 return `${prefixCls}-input`;
79 80 }
80 81 },
81   - ready () {
  82 + mounted () {
  83 + // todo 使用 while向上查找
82 84 if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
83 85 if (!this.group) {
84 86 this.updateModel();
85   - if (this.$els.slot && this.$els.slot.innerHTML === '') {
  87 + if (this.$refs.slot && this.$refs.slot.innerHTML === '') {
86 88 this.showSlot = false;
87 89 }
88 90 }
... ... @@ -93,21 +95,24 @@
93 95 return false;
94 96 }
95 97  
96   - this.selected = event.target.checked;
  98 + const checked = event.target.checked;
  99 + this.currentValue = checked;
  100 + this.$emit('input', checked);
97 101  
98 102 if (this.group) {
99 103 this.$parent.change(this.model);
100 104 } else {
101   - this.$emit('on-change', this.checked);
102   - this.$dispatch('on-form-change', this.checked);
  105 + this.$emit('on-change', checked);
  106 + // todo 事件
  107 +// this.$dispatch('on-form-change', checked);
103 108 }
104 109 },
105 110 updateModel () {
106   - this.selected = this.checked;
  111 + this.currentValue = this.value;
107 112 }
108 113 },
109 114 watch: {
110   - checked () {
  115 + value () {
111 116 this.updateModel();
112 117 }
113 118 }
... ...
src/components/radio/radio-group.vue
  Show/Hide comments   View file @cbe03a1
... ... @@ -33,7 +33,7 @@
33 33 data () {
34 34 return {
35 35 currentValue: this.value
36   - }
  36 + };
37 37 },
38 38 computed: {
39 39 classes () {
... ...
src/components/radio/radio.vue
  Show/Hide comments   View file @cbe03a1
... ... @@ -63,6 +63,7 @@
63 63 }
64 64 },
65 65 mounted () {
  66 + // todo 使用 while向上查找
66 67 if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
67 68 if (!this.group) {
68 69 this.updateValue();
... ...
src/index.js
  Show/Hide comments   View file @cbe03a1
... ... @@ -10,7 +10,7 @@ import Button from &#39;./components/button&#39;;
10 10 // import Card from './components/card';
11 11 // import Carousel from './components/carousel';
12 12 // import Cascader from './components/cascader';
13   -// import Checkbox from './components/checkbox';
  13 +import Checkbox from './components/checkbox';
14 14 // import Circle from './components/circle';
15 15 // import Collapse from './components/collapse';
16 16 // import DatePicker from './components/date-picker';
... ... @@ -60,8 +60,8 @@ const iview = {
60 60 // Carousel,
61 61 // CarouselItem: Carousel.Item,
62 62 // Cascader,
63   - // Checkbox,
64   - // CheckboxGroup: Checkbox.Group,
  63 + Checkbox,
  64 + CheckboxGroup: Checkbox.Group,
65 65 // Circle,
66 66 // DatePicker,
67 67 // Dropdown,
... ...
test/app.vue
  Show/Hide comments   View file @cbe03a1
... ... @@ -29,6 +29,7 @@ li + li {
29 29 <li><router-link to="/button">Button</router-link></li>
30 30 <li><router-link to="/input">Input</router-link></li>
31 31 <li><router-link to="/radio">Radio</router-link></li>
  32 + <li><router-link to="/checkbox">Checkbox</router-link></li>
32 33 </ul>
33 34 </nav>
34 35 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @cbe03a1
... ... @@ -36,6 +36,10 @@ const router = new VueRouter({
36 36 {
37 37 path: '/radio',
38 38 component: require('./routers/radio.vue')
  39 + },
  40 + {
  41 + path: '/checkbox',
  42 + component: require('./routers/checkbox.vue')
39 43 }
40 44 ]
41 45 });
... ...
test/routers/checkbox.vue 0 → 100644
  Show/Hide comments   View file @cbe03a1
  1 +<template>
  2 + <div>
  3 + <Checkbox v-model="single" @on-change="s">Checkbox</Checkbox>
  4 + {{ single }}
  5 + <div @click="single = !single">single-change</div>
  6 + <br>
  7 + {{ social }}
  8 + <Checkbox-group v-model="social" @on-change="s">
  9 + <Checkbox label="twitter">
  10 + <Icon type="social-twitter"></Icon>
  11 + <span>Twitter</span>
  12 + </Checkbox>
  13 + <Checkbox label="facebook">
  14 + <Icon type="social-facebook"></Icon>
  15 + <span>Facebook</span>
  16 + </Checkbox>
  17 + <Checkbox label="github">
  18 + <Icon type="social-github"></Icon>
  19 + <span>Github</span>
  20 + </Checkbox>
  21 + <Checkbox label="snapchat">
  22 + <Icon type="social-snapchat"></Icon>
  23 + <span>Snapchat</span>
  24 + </Checkbox>
  25 + </Checkbox-group>
  26 + <br>
  27 + <div @click="c">修改1</div>
  28 + {{ fruit }}
  29 + <Checkbox-group v-model="fruit">
  30 + <Checkbox label="香蕉"></Checkbox>
  31 + <Checkbox label="苹果"></Checkbox>
  32 + <Checkbox label="西瓜"></Checkbox>
  33 + </Checkbox-group>
  34 + <br><br>
  35 + <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
  36 + <Checkbox
  37 + :indeterminate="indeterminate"
  38 + v-model="checkAll"
  39 + @click.prevent.native="handleCheckAll">全选</Checkbox>
  40 + </div>
  41 + <Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
  42 + <Checkbox label="香蕉"></Checkbox>
  43 + <Checkbox label="苹果"></Checkbox>
  44 + <Checkbox label="西瓜"></Checkbox>
  45 + </Checkbox-group>
  46 + </div>
  47 +</template>
  48 +<script>
  49 + export default {
  50 + data () {
  51 + return {
  52 + social: ['facebook', 'github'],
  53 + fruit: ['苹果'],
  54 + single: false,
  55 + indeterminate: true,
  56 + checkAll: false,
  57 + checkAllGroup: ['香蕉', '西瓜']
  58 + }
  59 + },
  60 + methods: {
  61 + c () {
  62 + this.social.splice(0, 1)
  63 + },
  64 + s (d) {
  65 + console.log(d)
  66 + },
  67 + handleCheckAll () {
  68 + if (this.indeterminate) {
  69 + this.checkAll = false;
  70 + } else {
  71 + this.checkAll = !this.checkAll;
  72 + }
  73 + this.indeterminate = false;
  74 +
  75 + if (this.checkAll) {
  76 + this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
  77 + } else {
  78 + this.checkAllGroup = [];
  79 + }
  80 + },
  81 + checkAllGroupChange (data) {
  82 + if (data.length === 3) {
  83 + this.indeterminate = false;
  84 + this.checkAll = true;
  85 + } else if (data.length > 0) {
  86 + this.indeterminate = true;
  87 + this.checkAll = false;
  88 + } else {
  89 + this.indeterminate = false;
  90 + this.checkAll = false;
  91 + }
  92 + }
  93 + }
  94 + }
  95 +</script>
... ...