feat: switch组件启动开发

src/config.js

@@ -233,6 +233,16 @@ module.exports = {
           show: true,
           desc: '输入框组件',
           author: 'gxx158'
+        },
+        {
+          version: '3.0.0',
+          name: 'Switch',
+          type: 'component',
+          cName: '开关组件',
+          desc: '用来打开或关闭选项',
+          sort: 3,
+          show: true,
+          author: 'zongyue3'
         }
       ]
     },

src/packages/switch/demo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      开
+      <nut-switch></nut-switch>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('switch');
+export default createDemo({
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.nut-temp {
+}
+</style>

src/packages/switch/doc.md

@@ -0,0 +1,46 @@
+#  switch组件
+
+### 介绍
+
+用来打开或关闭选项。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Switch } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Switch);
+
+```
+
+## 代码演示
+
+### 基础用法
+
+``` html
+<nut-switch></nut-switch>
+```
+
+### change事件
+
+### 自定义颜色
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| checked         | 开关状态               | Boolean | true |
+| activeColor        | 开关打开时的背景颜色  | String | -                |
+| inactiveColor         | 开关关闭时的背景颜色 | String | "#fff"         |
+
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| switch-change  | 切换开关时触发 | event: Event |
+    

src/packages/switch/index.scss

@@ -0,0 +1,26 @@
+.nut-switch {
+  display: flex;
+  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%
+  );
+  border-radius: 25px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto; // 防止被压缩
+  .switch-button {
+    display: flex;
+    width: 26px;
+    height: 26px;
+    border-radius: 13px;
+    background: rgba(255, 255, 255, 1);
+    transform: translateX(146%);
+  }
+}

src/packages/switch/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <view :style="styles" class="nut-switch">
+    <view class="switch-button" @click="onClick"></view>
+  </view>
+</template>
+
+<script lang="ts">
+import { toRefs, computed } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('switch');
+
+export default create({
+  props: {
+    checked: {
+      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%);'
+    },
+    inactiveColor: {
+      type: String,
+      default: '#fff'
+    }
+  },
+
+  setup(props, { emit }) {
+    const { checked, activeColor, inactiveColor } = toRefs(props);
+
+    const styles = computed(() => {
+      return {
+        backgroundColor: `${activeColor.value}`
+      };
+    });
+
+    const onClick = () => {
+      checked.value = !checked.value;
+      emit('switch-change', event);
+    };
+
+    return {
+      styles,
+      onClick,
+      checked
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>