feat: switch基本完成

src/packages/switch/demo.vue

@@ -1,25 +1,67 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell>
-      开
-      <nut-switch></nut-switch>
+    <nut-cell class="switch-adjust">
+      {{ text }}
+      <nut-switch
+        @switch-change="switchChange"
+        class="switch-decoration"
+      ></nut-switch>
+    </nut-cell>
+
+    <h2>change事件</h2>
+    <nut-cell class="switch-adjust">
+      chane
+      <nut-switch
+        @switch-change="change"
+        class="switch-decoration"
+      ></nut-switch>
+    </nut-cell>
+
+    <h2>自定义颜色</h2>
+    <nut-cell class="switch-adjust">
+      color
+      <nut-switch activeColor="blue" class="switch-decoration"></nut-switch>
     </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
+import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/utils/create';
+import { isObject } from '@vue/shared';
 const { createDemo } = createComponent('switch');
 export default createDemo({
   props: {},
   setup() {
-    return {};
+    const response = reactive({
+      text: '开'
+    });
+    const switchChange = (event: Event, isOpen: boolean) => {
+      response.text = isOpen ? '开' : '关';
+    };
+    const change = (event: Event, isOpen: boolean) => {
+      console.log('触发了change事件,开关状态：', isOpen);
+    };
+
+    return {
+      ...toRefs(response),
+      switchChange,
+      change
+    };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.nut-temp {
+.switch-adjust {
+  font-size: 18px;
+  color: rgba(102, 102, 102, 1);
+  justify-content: space-between;
+  align-items: center;
+}
+
+.switch-decoration {
+  cursor: pointer;
 }
 </style>

src/packages/switch/doc.md

@@ -25,17 +25,39 @@ app.use(Switch);
 
 ### change事件
 
+``` html
+<nut-switch @switch-change="change"></nut-switch>
+```
+
+``` javascript
+export default {
+  setup() {
+    const change = (event: Event, isOpen: boolean) => {
+      console.log('触发了change事件,开关状态：', isOpen);
+    };
+    
+    return {
+      change
+    };
+  }
+};
+```
+
 ### 自定义颜色
 
+``` html
+<nut-switch activeColor="blue"></nut-switch>
+```
+
 ## API
 
 ### Props
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| checked         | 开关状态               | Boolean | true |
-| activeColor        | 开关打开时的背景颜色  | String | -                |
-| inactiveColor         | 开关关闭时的背景颜色 | String | "#fff"         |
+| status         | 开关状态               | Boolean | true |
+| activeColor        | 开关打开时的背景颜色  | String | rgb(250,63,25,1)                |
+| inactiveColor         | 开关关闭时的背景颜色 | String | rgba(235,235,235,1)         |
 
 
 ### Events

src/packages/switch/index.scss

@@ -3,13 +3,7 @@
   align-items: center;
   width: 72px;
   height: 42px;
-  background-image: linear-gradient(
-    135deg,
-    rgba(250, 44, 25, 1) 0%,
-    rgba(250, 63, 25, 1) 45%,
-    rgba(250, 89, 25, 1) 83%,
-    rgba(250, 100, 25, 1) 100%
-  );
+  background-color: rgb(250, 63, 25, 1);
   border-radius: 25px;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -17,10 +11,27 @@
   flex: 0 0 auto; // 防止被压缩
   .switch-button {
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: 26px;
     height: 26px;
     border-radius: 13px;
     background: rgba(255, 255, 255, 1);
+    transition: transform 0.3s;
+    transform: translateX(30%);
+  }
+}
+.switch-open {
+  .switch-button {
     transform: translateX(146%);
   }
 }
+.switch-close {
+  background-color: rgba(235, 235, 235, 1);
+  .close-line {
+    width: 16px;
+    height: 4px;
+    background: rgba(240, 240, 240, 1);
+    border-radius: 4px;
+  }
+}

src/packages/switch/index.vue

@@ -1,49 +1,83 @@
 <template>
-  <view :style="styles" class="nut-switch">
-    <view class="switch-button" @click="onClick"></view>
+  <view
+    @click="onClick"
+    :style="style"
+    class="nut-switch"
+    :class="[isOpen ? 'switch-open' : 'switch-close']"
+  >
+    <view class="switch-button">
+      <view v-show="!isOpen" class="close-line"></view>
+    </view>
   </view>
 </template>
 
 <script lang="ts">
-import { toRefs, computed } from 'vue';
+import { toRefs, computed, reactive, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('switch');
 
 export default create({
   props: {
-    checked: {
+    status: {
       type: Boolean,
       default: true
     },
     activeColor: {
       type: String,
-      default:
-        'linear-gradient(135deg, rgba(250,44,25,1) 0%,rgba(250,63,25,1) 45%,rgba(250,89,25,1) 83%,rgba(250,100,25,1) 100%);'
+      default: ''
     },
     inactiveColor: {
       type: String,
-      default: '#fff'
+      default: ''
     }
   },
 
   setup(props, { emit }) {
-    const { checked, activeColor, inactiveColor } = toRefs(props);
+    const { status, activeColor, inactiveColor } = toRefs(props);
+    const actColor = activeColor.value;
+    const inaColor = inactiveColor.value;
 
-    const styles = computed(() => {
-      return {
-        backgroundColor: `${activeColor.value}`
-      };
+    const response = reactive({
+      isOpen: status.value ? status.value : true,
+      style: {}
     });
 
+    const styleCheck = status => {
+      if (status) {
+        if (actColor) {
+          response.style = {
+            backgroundColor: `${actColor}`
+          };
+        } else {
+          response.style = {
+            backgroundColor: 'rgb(250,63,25,1)'
+          };
+        }
+      }
+      if (!status) {
+        if (inaColor) {
+          response.style = {
+            backgroundColor: `${inaColor}`
+          };
+        } else {
+          response.style = {
+            backgroundColor: 'rgba(235,235,235,1)'
+          };
+        }
+      }
+    };
+
+    styleCheck(status.value);
+
     const onClick = () => {
-      checked.value = !checked.value;
-      emit('switch-change', event);
+      response.isOpen = !response.isOpen;
+      styleCheck(response.isOpen);
+      emit('switch-change', event, response.isOpen);
     };
 
     return {
-      styles,
-      onClick,
-      checked
+      ...toRefs(response),
+      onClick
     };
   }
 });