upd: switch新增内嵌文字标签,如ON|OFF或开|关

src/packages/switch/demo.vue

@@ -56,6 +56,15 @@
         <span slot="title"><nut-switch :active="true" class="my-switch"></nut-switch></span>
       </nut-cell>
     </div>
+        <h4>内嵌文字标签</h4>
+    <div>
+      <nut-cell>
+        <span slot="title"><nut-switch :active="true" label="ON|OFF"></nut-switch></span>
+      </nut-cell>
+           <nut-cell>
+        <span slot="title"><nut-switch :active="false" label="通过|拒绝"></nut-switch></span>
+      </nut-cell>
+    </div>
   </div>
 </template>
 

src/packages/switch/doc.md

@@ -80,7 +80,14 @@ export default {
 >
 </nut-switch>
 ```
-
+## 内嵌文字
+```html
+<nut-switch 
+  :active="true"  
+  :label="开|关"
+>
+</nut-switch>
+```
 
 ## Prop
 
@@ -88,4 +95,5 @@ export default {
 |----- | ----- | ----- | -----
 | active | 开关状态 | Boolean | false
 | size | 尺寸，可选值small/base/large | String | base
-| disabled | 是否禁用 | Boolean | false
+| disabled | 是否禁用 | Boolean | false
+| label | 内嵌文字标签，竖线分开，如ON\|OFF 或 开\|关 | String  | 

src/packages/switch/switch.scss

@@ -1,12 +1,25 @@
 .nut-switch {
   position: relative;
-  display: inline-block;
+  width: auto;
+  display: inline-block !important;
   background: #fff;
   border-radius: 1000px;
   vertical-align: bottom;
   box-sizing: content-box;
   border: 2px $border-style-base $border-color-base;
   transition: all $transition-duration $animation-timing-fun;
+  .nut-switch-label {
+    position:relative;
+    width:auto;
+    left:0;
+    margin-left:22px;
+    display: inline-block !important;
+    padding:0 2px 0 2px  !important;
+    text-align:center !important;
+    color:#999 !important;
+    font-style:normal !important;
+    font-size:12px;
+  }
   .nut-switch-btn {
     position: absolute;
     left: 0;
@@ -15,9 +28,16 @@
     border-radius: 50%;
     box-sizing: border-box;
     transition: all $transition-duration $animation-timing-fun;
+
   }
   &.nut-switch-active {
     border-color: $border-color-active;
+   .nut-switch-label {
+    left:0;
+    margin-left:0px;
+    color:red !important;
+    margin-right:22px;
+   }
     .nut-switch-btn {
       background-color: $primary-color;
     }
@@ -29,42 +49,51 @@
 
 .nut-switch-small {
   height: 14px;
-  width: 32px;
+  min-width: 36px;
+  .nut-switch-label {
+    font-size: 10px;
+    top:-4px;
+    margin-left:-25px;
+  }
   .nut-switch-btn {
     height: 14px;
     width: 14px;
   }
   &.nut-switch-active {
     .nut-switch-btn {
-      left: 18px;
+      left: 100%;
+      margin-left:-15px;
     }
   }
 }
 
 .nut-switch-base {
   height: 20px;
-  width: 46px;
+  min-width: 46px;
   .nut-switch-btn {
     height: 20px;
-    width: 20px;
+    width: 22px;
   }
   &.nut-switch-active {
     .nut-switch-btn {
-      left: 26px;
+      left: 100%;
+      margin-left:-21px;
     }
   }
 }
 
 .nut-switch-large {
   height: 28px;
-  width: 58px;
+  min-width: 58px;
+  font-size: 14px;
   .nut-switch-btn {
     height: 28px;
-    width: 28px;
+    min-width: 28px;
   }
   &.nut-switch-active {
     .nut-switch-btn {
-      left: 30px;
+      left: 100%;
+      margin-left:-28px;
     }
   }
 }

src/packages/switch/switch.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="nut-switch" :class="[{ 'nut-switch-active': isActive }, 'nut-switch-' + size, { 'nut-switch-disabled': disabled }]" @click="toggle">
-    <div class="nut-switch-btn"></div>
+    <div class="nut-switch-btn">
+    </div>
+      <div class="nut-switch-label" v-if="isActive">{{arrLabel[0]}}</div>
+      <div class="nut-switch-label" v-else>{{arrLabel[1]}}</div>
   </div>
 </template>
 <script>
@@ -18,11 +21,16 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    label:{
+      type: String,
+      default: ""
     }
   },
   data() {
     return {
-      isActive: false
+      isActive: false,
+      arrLabel : ( this.label||'').split('|')
     };
   },
   created() {