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

2017-02-22 15:30:45 +08:00
parent 1417f22c3b
commit 396e46ef0a
3 changed files with 26 additions and 25 deletions
@@ -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: {