fix(Switch): add slot open and close

Closes #184
heyui · Jul 15, 2019 · 7a75961 · 7a75961
1 parent 904a94b
commit 7a75961
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/doc/components/demos/form/switch1.vue b/doc/components/demos/form/switch1.vue
@@ -4,6 +4,19 @@
     <div><h-switch v-model="check1" :trueValue="1" :falseValue="2">1/2</h-switch></div>
     <div>{{check2}}</div>
     <div><h-switch v-model="check2" trueValue="yes" falseValue="no" :small="true">yes/no</h-switch></div>
+    <div>{{check3}}</div>
+    <div>
+      <h-switch v-model="check3">
+        <span slot="open">开</span>
+        <span slot="close">关</span>
+      </h-switch>
+    </div>
+    <div>{{check4}}</div>
+    <div>
+      <h-switch v-model="check4">
+        <span slot="open" class="h-icon-check"></span>
+        <span slot="close" class="h-icon-close"></span>
+      </h-switch></div>
   </div>
 </template>
 
@@ -13,7 +26,9 @@ export default {
   data() {
     return {
       check1: 2,
-      check2: 'no'
+      check2: 'no',
+      check3: false,
+      check4: false
     };
   }
 };

diff --git a/src/components/h-switch/hswitch.vue b/src/components/h-switch/hswitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="h-switch" :class="{'h-switch-small':small}" @click="setvalue"><span class="h-switch-span" :checked="isChecked" :disabled="disabled"></span><span class="h-switch-text"><slot></slot></span></label>
+  <label class="h-switch" :class="{'h-switch-small':small}" @click="setvalue"><span class="h-switch-span" :checked="isChecked" :disabled="disabled"><span class="h-switch-inner"><slot name="open" v-if="isChecked"></slot><slot v-else name="close"></slot></span></span><span class="h-switch-text"><slot></slot></span></label>
 </template>
 <script>
 export default {

diff --git a/themes/components/switch.less b/themes/components/switch.less
@@ -19,7 +19,6 @@
   }
   line-height: @height+2px;
 }
-
 .@{switch-prefix} .@{switch-prefix}-span {
   display: inline-block;
   margin: 0px;
@@ -53,12 +52,26 @@
     border-radius: 15px;
     transition: transform .3s;
   }
+
+  .@{switch-prefix}-inner {
+    font-size: @font-size-mini;
+    line-height: @switch-hight;
+    position: absolute;
+    left: 29px;
+  }
+
   &:checked,&[checked] {
     border-color: @primary-color;
     background: @primary-color;
     &:before {
       transform: scale(0);
     }
+
+    .@{switch-prefix}-inner {
+      left: 5px;
+      color: #FFF;
+    }
+
     &[disabled]{
       background-color: @disabled-background-color;
     }
@@ -80,12 +93,16 @@
 
 .@{switch-prefix}{
   display: inline-block;
+  position: relative;
   cursor: pointer;
   >.h-switch-text{
     display: inline-block;
   }
   .switchset(@switch-hight);
   &.@{switch-prefix}-small {
     .switchset(@min-switch-height);
+    .@{switch-prefix}-inner {
+      display: none;
+    }
   }
 }