完成switch组件

Readme.md

@@ -34,7 +34,7 @@
 - [x] `wc-radio`表单组件-单选框
 - [ ] `wc-select`表单组件-下拉选择
 - [ ] `wc-cascadar`表单组件-多级联动
-- [ ] `wc-switch`表单组件-开关
+- [x] `wc-switch`表单组件-开关
 - [x] `wc-icon`图标组件
 - [ ] `wc-layer` 弹层组件
 - [x] `wc-markd`markdown 组件

src/form/switch.js

@@ -4,15 +4,19 @@
  * @date 2023/03/21 16:14:10
  */
 
-import { nextTick, css, html, Component } from '@bd/core'
+import { nextTick, css, html, Component, classMap } from '@bd/core'
 
 class Switch extends Component {
   static props = {
+    size: 'l',
     value: {
-      type: String,
+      type: Boolean,
-      default: '',
+      default: false,
       attribute: false
     },
+    'inactive-text': '',
+    'active-text': '',
+    'inline-text': false,
     disabled: false,
     readonly: false
   }
@@ -42,15 +46,38 @@ class Switch extends Component {
 
         .dot {
           display: flex;
-          justify-content: center;
           align-items: center;
-          width: 36px;
+          justify-content: space-between;
+          min-width: 36px;
           height: 18px;
-          padding: 3px;
+          padding: 0 4px;
           margin-right: 5px;
+          line-height: 14px;
           border-radius: 16px;
-          background: var(--color-dark-1);
+          background: var(--color-plain-3);
-          transition: box-shadow 0.15s linear;
+          transition: box-shadow 0.2s ease, background 0.2s ease;
+
+          &::before {
+            display: block;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #fff;
+            content: '';
+          }
+
+          &::after {
+            display: flex;
+            padding: 0 2px;
+            font-size: 12px;
+            content: attr(st);
+            color: #fff;
+          }
+
+          &.open {
+            flex-direction: row-reverse;
+            background: var(--color-teal-1);
+          }
         }
       }
     `,
@@ -63,6 +90,7 @@ class Switch extends Component {
     // 尺寸
     css`
       @use 'sass:map';
+      @use 'sass:math';
       $sizes: (
         m: (
           w: 72px,
@@ -91,14 +119,29 @@ class Switch extends Component {
         )
       );
 
+      @function double($n) {
+        $m: math.round($n);
+
+        @if $m % 2 == 0px {
+          @return $m;
+        }
+        @return $m + 1;
+      }
+
       @loop $s, $v in $sizes {
         :host([size='#{$s}']) {
           height: map.get($v, 'h');
           font-size: map.get($v, 'f');
 
           .dot {
-            width: #{map.get($v, 'f') * 2.5};
+            min-width: #{map.get($v, 'f') * 2.5};
-            height: #{map.get($v, 'f') * 1.25};
+            height: #{double(map.get($v, 'f') * 1.25)};
+            line-height: #{map.get($v, 'f')};
+
+            &::before {
+              width: #{map.get($v, 'f')};
+              height: #{map.get($v, 'f')};
+            }
           }
         }
       }
@@ -117,11 +160,7 @@ class Switch extends Component {
 
       @loop $t, $c in $colors {
         :host([type='#{$t}']) {
-          label {
+          .dot.open {
-            color: var(--color-#{$c}-1);
-          }
-
-          .dot {
             background: var(--color-#{$c}-1);
           }
 
@@ -151,17 +190,12 @@ class Switch extends Component {
 
     ev.stopPropagation()
 
-    this.checked = !this.checked
+    this.value = !this.value
     let data = {
-      value: this.value,
+      value: this.value
-      checked: this.checked
     }
 
-    if (this.inGroup) {
+    this.$emit('change', data)
-      this.parentNode.$emit('child-change', data)
-    } else {
-      this.$emit('change', data)
-    }
   }
 
   handleClick(ev) {
@@ -170,20 +204,30 @@ class Switch extends Component {
     }
   }
 
-  mounted() {
+  mounted() {}
-    if (this.parentNode?.tagName === 'WC-CHECKBOX-GROUP') {
-      this.inGroup = true
-    }
-  }
 
   render() {
+    let classes = classMap({ dot: true, open: this.value })
     return html` <label
       tabindex=${this.disabled ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
     >
-      <span class="dot"></span>
+      <span
-      <slot></slot>
+        class=${classes}
+        st=${this['inline-text']
+          ? this.value
+            ? this['active-text']
+            : this['inactive-text']
+          : ''}
+      ></span>
+      <slot
+        >${!this['inline-text']
+          ? this.value
+            ? this['active-text']
+            : this['inactive-text']
+          : ''}</slot
+      >
     </label>`
   }
 }