blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: 增加动画及使用BEM规范

Browse Source
This commit is contained in:
jiangruowei 2017-02-22 15:30:45 +08:00
parent 1417f22c3b
commit 396e46ef0a
3 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/examples/switch.md
View File

@ -43,13 +43,17 @@ export default {
:::demo 样例代码 :::demo 样例代码
```html ```html
<div class="page-switch"> <div class="page-switch">
<div class="page-switch-wrapper"> <div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch> <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<div class="page-switch-text">{{switchStateText}}</div> <div class="page-switch__text">{{switchStateText}}</div>
</div> </div>
<div class="page-switch-wrapper"> <div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch> <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch-text">OFF, DISABLED</div> <div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div> </div>
</div> </div>
``` ```

19
packages/switch/src/switch.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState"> <div class="z-switch" :class="switchState" @click="toggleState">
<div class="o2-switch-node" :class="['is-' + switchState]"></div> <div class="z-switch__node" :class="switchState"></div>
</div> </div>
</template> </template>
@ -39,15 +39,12 @@ export default {
}, },
computed: { computed: {
switchState: function() { switchState: function() {
if (this.disabled) { let switchState = this.checked ? ['is-on'] : ['is-off'];
return 'disabled';
} else if (this.loading) { if (this.disabled) switchState.push('is-disabled');
return 'loading'; if (this.loading) switchState.push('is-loading');
} else if (this.checked) {
return 'on'; return switchState;
} else {
return 'off';
}
} }
}, },
methods: { methods: {

20
packages/zanui-css/src/switch.pcss
View File

@ -17,28 +17,23 @@
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
@when on { @when on {
left: 0; left: 0;
transition: all .5s ease-in-out;
} }
@when off { @when off {
right: 0; left: 20px;
transition: all .5s ease-in-out;
} }
} }
@when on { @when on {
background-color: #44db5e; background-color: #44db5e;
border-color: #44db5e; border-color: #44db5e;
@descendent node {
left: 0;
}
} }
@when off { @when off {
background-color: #fff; background-color: #fff;
border-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
@descendent node {
right: 0;
}
} }
@when loading { @when loading {
@ -46,8 +41,13 @@
} }
@when disabled { @when disabled {
background-color: #f2f2f2; @when off {
border-color: rgba(0, 0, 0, .1); background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
}
@when on {
background-color: #a6e7b1;
}
} }
} }
} }