upd: switch style

src/packages/switch/__test__/switch.spec.js

@@ -56,14 +56,6 @@ describe('Switch.vue', () => {
         })
     });
 
-    it('尺寸设置为large', () => {
-        wrapper.setProps({ size: 'large' });
-
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains('.nut-switch-large')).toBe(true);
-        })
-    });
-
     it('打开状态点击关闭', () => {
         wrapper.setProps({ active: true });
         wrapper.trigger('click');

src/packages/switch/demo.vue

@@ -1,29 +1,36 @@
 <template>
   <div class="demo-list">
-    <h4>基本用法</h4>
+    <h4>基础样式</h4>
     <div>
-      <nut-cell>
-        <span slot="title"><nut-switch :active.sync="swActive"></nut-switch></span>
-        <div slot="desc">{{ swActive }}</div>
-      </nut-cell>
+        <nut-cell>
+            <div slot="title">{{ swActive ? '开' : '关' }}</div>
+            <span slot="desc"><nut-switch :active.sync="swActive"></nut-switch></span>
+        </nut-cell>
+        <nut-cell>
+            <div slot="title">开启禁用</div>
+            <span slot="desc"><nut-switch :disabled="true"></nut-switch></span>
+        </nut-cell>
+        <nut-cell>
+            <div slot="title">关闭禁用</div>
+            <span slot="desc"><nut-switch @change="onChange" :active="true" :disabled="true"></nut-switch></span>
+        </nut-cell>
     </div>
 
-    <h4>自定义尺寸</h4>
+    <h4>迷你开关</h4>
     <div>
-      <nut-cell>
-        <span slot="title"><nut-switch :active="true" size="small"></nut-switch></span>
-        <div slot="desc">small</div>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title"><nut-switch :active="true" size="base"></nut-switch></span>
-        <div slot="desc">base</div>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title"><nut-switch :active="true" size="large"></nut-switch></span>
-        <div slot="desc">large</div>
-      </nut-cell>
+        <nut-cell>
+            <div slot="title">{{ swActive2 ? '开' : '关' }}</div>
+            <span slot="desc"><nut-switch :active.sync="swActive2" size="small"></nut-switch></span>
+        </nut-cell>
+        <nut-cell>
+            <div slot="title">开启禁用</div>
+            <span slot="desc"><nut-switch :disabled="true" size="small"></nut-switch></span>
+        </nut-cell>
+        <nut-cell>
+            <div slot="title">关闭禁用</div>
+            <span slot="desc"><nut-switch @change="onChange" :active="true" :disabled="true" size="small"></nut-switch></span>
+        </nut-cell>
     </div>
-    <p>内置"small","base","large"三种规格</p>
 
     <h4>change事件</h4>
     <div>
@@ -31,25 +38,6 @@
         <span slot="title"><nut-switch @change="onChange"></nut-switch></span>
       </nut-cell>
     </div>
-
-    <h4>禁用状态</h4>
-    <div>
-      <nut-cell>
-        <span slot="title"><nut-switch :disabled="true"></nut-switch></span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title"><nut-switch @change="onChange" :active="true" :disabled="true"></nut-switch></span>
-      </nut-cell>
-    </div>
-    <p>禁用状态下，change事件参数永远为初始值</p>
-
-    <h4>循环场景</h4>
-    <div v-for="(item, index) of list" :key="index">
-      <nut-cell>
-        <span slot="title"> {{ item.name }}</span>
-        <span slot="desc"><nut-switch @change="onChangeLabel($event, index)" :active="true"></nut-switch></span>
-      </nut-cell>
-    </div>
     <h4>自定义Class</h4>
     <div>
       <nut-cell>
@@ -64,19 +52,12 @@ export default {
   data() {
     return {
       swActive: true,
-      list: [
-        { id: '1', name: 'a' },
-        { id: '2', name: 'b' },
-        { id: '3', name: 'c' }
-      ]
+      swActive2: true
     };
   },
   methods: {
     onChange(status) {
       alert(status);
-    },
-    onChangeLabel(status, index) {
-      alert('status:' + status + ',selected:' + index);
     }
   }
 };

src/packages/switch/doc.md

@@ -2,7 +2,7 @@
 
 用来打开或关闭选项。
 
-## 基本用法
+## 基础样式
 
 ```html
 <nut-switch 
@@ -30,7 +30,7 @@ export default {
 
 ## 自定义尺寸
 
-内置 **small**，**base**，**large** 三种规格供使用。
+内置 **small**，**base** 两种规格供使用。
 ```html
 <nut-switch 
   :active="true" 
@@ -40,10 +40,6 @@ export default {
   :active="true" 
   size="base"
 >
-<nut-switch 
-  :active="true" 
-  size="large"
->
 ```
 
 ## change事件
@@ -87,5 +83,5 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | active | 开关状态 | Boolean | false
-| size | 尺寸，可选值small/base/large | String | base
+| size | 尺寸，可选值small/base | String | base
 | disabled | 是否禁用 | Boolean | false

src/packages/switch/switch.scss

@@ -1,70 +1,56 @@
 .nut-switch {
   position: relative;
   display: inline-block;
-  background: #fff;
-  border-radius: 1000px;
+  background: #eee;
+  border-radius: 20px;
   vertical-align: bottom;
   box-sizing: content-box;
-  border: 2px $border-style-base $border-color-base;
+  border: 0;
   transition: all $transition-duration $animation-timing-fun;
   .nut-switch-btn {
     position: absolute;
     left: 0;
-    background: $border-color-base;
-    border: 2px solid #fff;
+    background: #fff;
+    border: 0;
     border-radius: 50%;
     box-sizing: border-box;
     transition: all $transition-duration $animation-timing-fun;
   }
   &.nut-switch-active {
-    border-color: $border-color-active;
-    .nut-switch-btn {
-      background-color: $primary-color;
-    }
+    background-color: $primary-color-jd-red;
   }
   &.nut-switch-disabled {
     opacity: 0.6;
   }
 }
 
-.nut-switch-small {
-  height: 14px;
-  width: 32px;
+.nut-switch-base {
+  height: 28px;
+  width: 54px;
   .nut-switch-btn {
-    height: 14px;
-    width: 14px;
+    height: 28px;
+    width: 28px;
   }
   &.nut-switch-active {
     .nut-switch-btn {
-      left: 18px;
+      left: 28px;
     }
   }
 }
 
-.nut-switch-base {
+.nut-switch-small {
   height: 20px;
-  width: 46px;
+  width: 38px;
+  &.nut-switch{
+      border-radius: 11px;
+  }
   .nut-switch-btn {
     height: 20px;
     width: 20px;
   }
   &.nut-switch-active {
     .nut-switch-btn {
-      left: 26px;
-    }
-  }
-}
-
-.nut-switch-large {
-  height: 28px;
-  width: 58px;
-  .nut-switch-btn {
-    height: 28px;
-    width: 28px;
-  }
-  &.nut-switch-active {
-    .nut-switch-btn {
-      left: 30px;
+      left: 19px;
     }
   }
 }