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 样例代码
```html
<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>
<div class="page-switch-text">{{switchStateText}}</div>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch-wrapper">
<div class="page-switch__wrapper">
<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>
```

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

@ -1,6 +1,6 @@
<template>
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
<div class="o2-switch-node" :class="['is-' + switchState]"></div>
<div class="z-switch" :class="switchState" @click="toggleState">
<div class="z-switch__node" :class="switchState"></div>
</div>
</template>
@ -39,15 +39,12 @@ export default {
},
computed: {
switchState: function() {
if (this.disabled) {
return 'disabled';
} else if (this.loading) {
return 'loading';
} else if (this.checked) {
return 'on';
} else {
return 'off';
}
let switchState = this.checked ? ['is-on'] : ['is-off'];
if (this.disabled) switchState.push('is-disabled');
if (this.loading) switchState.push('is-loading');
return switchState;
}
},
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);
@when on {
left: 0;
transition: all .5s ease-in-out;
}
@when off {
right: 0;
left: 20px;
transition: all .5s ease-in-out;
}
}
@when on {
background-color: #44db5e;
border-color: #44db5e;
@descendent node {
left: 0;
}
}
@when off {
background-color: #fff;
border-color: rgba(0, 0, 0, .1);
@descendent node {
right: 0;
}
}
@when loading {
@ -46,8 +41,13 @@
}
@when disabled {
background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
@when off {
background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
}
@when on {
background-color: #a6e7b1;
}
}
}
}