other / mew-iview

Commit 2d5ba278377194ec9c40ab3b8f1de50c74be8280

Authored by 梁灏
1 parent e31ab8ad

support Switch 

support Switch
Showing 7 changed files with 41 additions and 31 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @2d5ba27
... ... @@ -7,4 +7,6 @@ value 改为了 label，使用 v-model，废弃 checked
7 7 ### Checkbox
8 8 使用 v-model
9 9 ### CheckboxGroup
10   -value 改为了 label，使用 v-model，废弃 checked
11 10 \ No newline at end of file
  11 +value 改为了 label，使用 v-model，废弃 checked
  12 +### Switch
  13 +废弃checked， 改为了 value，使用 v-model
12 14 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @2d5ba27
... ... @@ -23,7 +23,7 @@
23 23 - [x] Input
24 24 - [x] Radio
25 25 - [x] Checkbox
26   -- [ ] Switch
  26 +- [x] Switch
27 27 - [ ] Table
28 28 - [ ] Select
29 29 - [ ] Slider
... ...
src/components/switch/switch.vue
  Show/Hide comments   View file @2d5ba27
1 1 <template>
2 2 <span :class="wrapClasses" @click="toggle">
3 3 <span :class="innerClasses">
4   - <slot name="open" v-if="checked"></slot>
5   - <slot name="close" v-if="!checked"></slot>
  4 + <slot name="open" v-if="currentValue"></slot>
  5 + <slot name="close" v-if="!currentValue"></slot>
6 6 </span>
7 7 </span>
8 8 </template>
... ... @@ -13,7 +13,7 @@
13 13  
14 14 export default {
15 15 props: {
16   - checked: {
  16 + value: {
17 17 type: Boolean,
18 18 default: false
19 19 },
... ... @@ -27,12 +27,17 @@
27 27 }
28 28 }
29 29 },
  30 + data () {
  31 + return {
  32 + currentValue: this.value
  33 + }
  34 + },
30 35 computed: {
31 36 wrapClasses () {
32 37 return [
33 38 `${prefixCls}`,
34 39 {
35   - [`${prefixCls}-checked`]: this.checked,
  40 + [`${prefixCls}-checked`]: this.currentValue,
36 41 [`${prefixCls}-disabled`]: this.disabled,
37 42 [`${prefixCls}-${this.size}`]: !!this.size
38 43 }
... ... @@ -48,9 +53,17 @@
48 53 return false;
49 54 }
50 55  
51   - this.checked = !this.checked;
52   - this.$emit('on-change', this.checked);
53   - this.$dispatch('on-form-change', this.checked);
  56 + const checked = !this.currentValue;
  57 + this.currentValue = checked;
  58 + this.$emit('input', checked);
  59 + this.$emit('on-change', checked);
  60 + // todo 事件
  61 +// this.$dispatch('on-form-change', this.checked);
  62 + }
  63 + },
  64 + watch: {
  65 + value (val) {
  66 + this.currentValue = val;
54 67 }
55 68 }
56 69 };
... ...
src/index.js
  Show/Hide comments   View file @2d5ba27
... ... @@ -32,7 +32,7 @@ import Radio from &#39;./components/radio&#39;;
32 32 // import Slider from './components/slider';
33 33 // import Spin from './components/spin';
34 34 import Steps from './components/steps';
35   -// import Switch from './components/switch';
  35 +import Switch from './components/switch';
36 36 // import Table from './components/table';
37 37 // import Tabs from './components/tabs';
38 38 // import Tag from './components/tag';
... ... @@ -98,7 +98,7 @@ const iview = {
98 98 // Spin,
99 99 Step: Steps.Step,
100 100 Steps,
101   - // Switch,
  101 + iSwitch: Switch,
102 102 // iTable: Table,
103 103 // Tabs: Tabs,
104 104 // TabPane: Tabs.Pane,
... ...
test/app.vue
  Show/Hide comments   View file @2d5ba27
... ... @@ -21,6 +21,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
21 21 <li><router-link to="/checkbox">Checkbox</router-link></li>
22 22 <li><router-link to="/steps">Steps</router-link></li>
23 23 <li><router-link to="/timeline">Timeline</router-link></li>
  24 + <li><router-link to="/switch">Switch</router-link></li>
24 25 </ul>
25 26 </nav>
26 27 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @2d5ba27
... ... @@ -48,6 +48,10 @@ const router = new VueRouter({
48 48 {
49 49 path: '/timeline',
50 50 component: require('./routers/timeline.vue')
  51 + },
  52 + {
  53 + path: '/switch',
  54 + component: require('./routers/switch.vue')
51 55 }
52 56 ]
53 57 });
... ...
test/routers/switch.vue
  Show/Hide comments   View file @2d5ba27
1 1 <template>
2   - <Switch @on-change="change"></Switch>
3   - <Switch>
4   - <span slot="open">开</span>
5   - <span slot="close">关</span>
6   - </Switch>
7   - <Switch size="large">
8   - <span slot="open">ON</span>
9   - <span slot="close">OFF</span>
10   - </Switch>
11   - <Switch>
12   - <Icon type="android-done" slot="open"></Icon>
13   - <Icon type="android-close" slot="close"></Icon>
14   - </Switch>
15   - <Switch :disabled="disabled"></Switch>
16   - <i-button type="primary" @click="disabled = !disabled">Toggle Disabled</i-button>
17   - <Switch size="small"></Switch>
  2 + <div>
  3 + <i-switch v-model="m1">
  4 + <span slot="open">开</span>
  5 + <span slot="close">关</span>
  6 + </i-switch>
  7 + {{ m1 }}
  8 + <div @click="m1 = !m1">toggle</div>
  9 + </div>
18 10 </template>
19 11 <script>
20   - import { Switch, Message, iButton, Icon } from 'iview';
21 12 export default {
22   - components: { Switch, Message, iButton, Icon },
23 13 data () {
24 14 return {
25   - disabled: true
  15 + m1: false
26 16 }
27 17 },
28 18 methods: {
29 19 change (status) {
30   - Message.info('开关状态：' + status);
  20 + console.log(status)
31 21 }
32 22 }
33 23 }
... ...