Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/config.js

@@ -282,7 +282,7 @@ module.exports = {
         },
         {
           name: 'Rate',
-          sort: 2,
+          sort: 4,
           cName: '评分',
           type: 'component',
           show: true,

src/packages/checkbox/demo.vue

@@ -2,29 +2,117 @@
   <div class="demo-list">
     <h4>基础用法</h4>
     <div class="show-demo">
-      <nut-checkbox v-model="checkbox1" @change="changeBox1">选项</nut-checkbox>
-      <nut-checkbox v-model="checkbox2" @change="changeBox1">选项</nut-checkbox>
+      <nut-checkbox v-model="checkbox1" @change="changeBox1"
+        >复选框</nut-checkbox
+      >
+      <span>{{ checkbox1 }}</span>
+    </div>
+    <h4>禁用状态</h4>
+    <div class="show-demo show-demo-block">
+      <nut-checkbox v-model="checkbox2" disabled>未选时禁用状态</nut-checkbox>
+      <nut-checkbox v-model="checkbox3" disabled>已选时禁用状态</nut-checkbox>
+    </div>
+    <h4>自定义尺寸</h4>
+    <div class="show-demo show-demo-block">
+      <nut-checkbox v-model="checkbox4" size="small">小号1</nut-checkbox>
+      <nut-checkbox v-model="checkbox5" size="base">默认</nut-checkbox>
+      <nut-checkbox v-model="checkbox6" size="large">大号</nut-checkbox>
+      <p>size可选值：'small', 'base', 'large'</p>
+    </div>
+    <h4>禁用动效</h4>
+    <div class="show-demo">
+      <nut-checkbox v-model="checkbox7" :animation="false"
+        >没有动效</nut-checkbox
+      >
+      <p>animation属性值为false时，禁用自带动效</p>
+    </div>
+    <h4>事件</h4>
+    <div class="show-demo">
+      <div class="demo-box">
+        <nut-checkbox
+          v-model="checkbox9"
+          :label="'change事件'"
+          @change="checkboxChange"
+          >备选项</nut-checkbox
+        >
+        <span>{{ result1 }}</span>
+        <p>值发生变化时，将触发change事件</p>
+      </div>
+    </div>
+    <div class="show-demo">
+      <div class="demo-box">
+        <nut-checkbox
+          v-model="checkbox10"
+          :label="'选项值1'"
+          @change="getChange"
+          >change事件</nut-checkbox
+        >
+        <span>{{ result2 }}</span>
+      </div>
+      <div class="demo-box">
+        <nut-checkbox
+          v-model="checkbox11"
+          :label="'选项值2'"
+          @change="getChange2"
+          >change事件</nut-checkbox
+        >
+        <span>{{ result3 }}</span>
+      </div>
+      <p>设置label时，可获取选项label值</p>
+    </div>
+    <h4>自定义Class</h4>
+    <div class="show-demo">
+      <nut-checkbox class="my-checkbox" v-model="checkbox12"
+        >自定义Class:"my-checkbox"</nut-checkbox
+      >
     </div>
-    <h4>基本用法</h4>
-    <div class="show-demo"> </div>
   </div>
 </template>
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('checkbox');
 export default createDemo({
   setup(props, context) {
     const data = reactive({
       checkbox1: false,
-      checkbox2: true
+      checkbox2: false,
+      checkbox3: true,
+      checkbox4: true,
+      checkbox5: true,
+      checkbox6: true,
+      checkbox7: false,
+      checkbox8: true,
+      checkbox9: false,
+      checkbox10: true,
+      checkbox11: false,
+      checkbox12: true,
+      checkbox13: false
+    });
+    const result = reactive({
+      result1: '',
+      result2: '',
+      result3: ''
     });
-    const changeBox1 = (name: string) => {
-      console.log(`点击了name是的面板`);
+    const changeBox1 = (state: boolean) => {
+      data.checkbox1 = state;
+    };
+    const checkboxChange = (state: string, val: string) => {
+      result.result1 = state;
+    };
+    const getChange = (state: boolean, val: string) => {
+      result.result2 = '选中状态：' + state + '，选项：' + val;
+    };
+    const getChange2 = (state: boolean, val: string) => {
+      result.result3 = '选中状态：' + state + '，选项：' + val;
     };
     return {
       changeBox1,
-      ...toRefs(data)
+      checkboxChange,
+      getChange,
+      getChange2,
+      ...toRefs(data),
+      ...toRefs(result)
     };
   }
 });
@@ -40,6 +128,7 @@ export default createDemo({
   margin: 60px 0;
   padding: 17px;
   h4 {
+    margin-top: 10px;
     line-height: 20px;
     color: #909ca4;
     font-size: 14px;
@@ -50,6 +139,28 @@ export default createDemo({
     background-color: #ffffff;
     border-radius: 7px;
     box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+    p,
+    span {
+      margin-top: 10px;
+      font-size: 14px;
+      color: #636363;
+    }
+    span {
+      font-size: 12px;
+    }
+  }
+  .show-demo-block {
+    view {
+      display: block;
+      margin-bottom: 10px;
+    }
+  }
+  .my-checkbox::v-deep .nut-checkbox {
+    input:checked {
+      background-image: url('https://img13.360buyimg.com/imagetools/jfs/t1/154120/1/10623/372/5fe013e6E4694fbf9/fd38d389b3a3b9c6.png');
+      background-size: 100%;
+      border: none;
+    }
   }
 }
 </style>

src/packages/checkbox/doc.md

@@ -1,64 +1,161 @@
-# Checkbox 组件
+# Checkbox 复选按钮
 
-### 介绍
+## 基本用法
 
-基于 xxxxxxx
+```html
+<nut-checkbox v-model="checkbox1">
+  选项
+</nut-checkbox>
+```
 
-### 安装
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
+```
+## 禁用状态
 
-``` javascript
-import { createApp } from 'vue';
-import { Temp } from '@nutui/nutui';
+非选中时的禁用状态
 
-const app = createApp();
-app.use(Temp);
+```html
+<nut-checkbox v-model="checkbox1" disabled>
+  未选时禁用状态
+</nut-checkbox>
+```
 
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
 ```
 
-## 代码演示
+选中时的禁用状态
 
-### 基础用法1
+```html
+<nut-checkbox v-model="checkbox1" disabled>
+  已选时禁用状态
+</nut-checkbox>
+```
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+```javascript
+data() {
+    return {
+      	checkbox1: true,
+    };
+},
+```
+
+## 自定义尺寸
+
+内置 **small**，**base**，**large** 三种规格供使用。
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" size="small">
+  小号
+</nut-checkbox>
+
+<nut-checkbox v-model="checkbox2" size="base" >
+  默认
+</nut-checkbox>
+
+<nut-checkbox v-model="checkbox3" size="large">
+  大号
+</nut-checkbox>
+```
+
+```javascript
+data() {
+    return {
+      	checkbox1: true,
+      	checkbox2: true,
+      	checkbox3: true,
+    };
+}
+
 ```
 
-### 基础用法2
+## 禁用动效
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+animation属性值为false时，禁用自带动效
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" :animation="false">
+  没有动效
+</nut-checkbox>
 ```
 
-### 基础用法3
+```javascript
+data() {
+    return {
+      	checkbox1: false,
+    };
+}
+```
+
+## 事件
+
+值发生变化时，将触发change事件
+
+```html
+<nut-checkbox v-model="checkbox1" @change="checkboxChange">
+  change事件
+</nut-checkbox>
+```
+
+```javascript
+methods: {
+	checkboxChange(checked) {
+        alert('change事件触发' + checked);
+	}  
+}
+```
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+设置label属性，获取选项状态和选项label值的方法：
 
 ```html
-<nut-temp name="wifi"></nut-temp>
-<nut-temp name="mail"></nut-temp>
+<nut-checkbox v-model="checkbox1" :label="'选项值'" @change="getChange">
+  备选项
+</nut-checkbox>
+```
+
+```javascript
+methods: {
+    getChange(checked,val){
+        console.log('选中状态：' + checked +'，选中选项：' + val) 
+    }
+    
+}
 ```
 
+**注意**：当设置了label属性时，第二个参数label才有值，否则默认为空。(label设置后替换插值内容)
+
+
+## 新增自定义class
+```html
+<nut-checkbox v-model="checkbox1" class="my-checkbox">
+  自定义了Class:"my-checkbox"
+</nut-checkbox>
+```
 
-## API
+## Prop
 
-### Props
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| name | checkbox的name属性 | String | -
+| v-model | 必填项，当前选中项的选中状态,同步value | Boolean | false
+| label | 当前选中项的label值，（可不设，设置后label有值，替换插值内容） | String | -
+| checked | checkbox的checked属性 | Boolean | false
+| size | 尺寸，可选值small/base/large | String | base
+| disabled | 是否禁用 | Boolean | false
+| animation | 是否需要动效 | Boolean | true
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| name         | 图标名称或图片链接               | String | -                |
-| color        | 图标颜色                         | String | -                |
-| size         | 图标大小，如 `20px` `2em` `2rem` | String | -                |
-| class-prefix | 类名前缀，用于使用自定义图标     | String | `nutui-iconfont` |
-| tag          | HTML 标签                        | String | `i`              |
 
-### Events
+## Event
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| click  | 点击图标时触发 | event: Event |
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| change | 值变化时触发 | 当前选中项状态（checked），当前选中项值（label）【设置label后有值、默认为空】,event

src/packages/checkbox/index.scss

@@ -32,14 +32,15 @@
       background-repeat: no-repeat;
       background-position: center;
       border-color: $primary-color;
-      box-shadow: 0 4px 6px 0 rgba($primary-color, 0.15);
+      &:not(:disabled).nut-checkbox-ani::after {
+        animation: nutPulse 0.25s;
+      }
     }
     &:disabled {
       background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/155506/4/9365/704/5fd3103cE779ad491/1939699720df7770.png');
-      border-color: $disable-color;
-      box-shadow: none;
+      // border-color: $disable-color;
       &:checked {
-        background-color: $disable-color;
+        background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/151947/10/10769/2246/5fe04ceeEd31c1a06/2bb48d747c49f9dd.png');
       }
     }
   }
@@ -53,7 +54,7 @@
     }
     .nut-checkbox-label {
       font-size: $font-size-2;
-      margin-left: 15px;
+      margin-left: 10px;
     }
   }
   &.nut-checkbox-size-small {
@@ -63,6 +64,7 @@
     }
     .nut-checkbox-label {
       font-size: $font-size-1;
+      margin-left: 6px;
     }
   }
   &.nut-checkbox-size-large {
@@ -72,6 +74,19 @@
     }
     .nut-checkbox-label {
       font-size: $font-size-3;
+      margin-left: 10px;
     }
   }
 }
+@keyframes nutPulse {
+  0% {
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+  }
+  100% {
+    width: 150%;
+    height: 150%;
+    opacity: 0;
+  }
+}

src/packages/checkbox/index.vue

@@ -20,7 +20,7 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs, watchEffect } from 'vue';
+import { reactive, ref, toRefs, watch, watchEffect } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('checkbox');
 
@@ -65,9 +65,8 @@ export default create({
   },
   components: {},
   setup(props, { emit }) {
-    let isChecked: boolean =
-      props.modelValue == props.trueValue || props.checked;
-
+    const isCheckedVal = props.modelValue == props.trueValue || props.checked;
+    const isChecked = ref(isCheckedVal);
     const isObject = obj => {
       return obj !== null && typeof obj === 'object';
     };
@@ -82,23 +81,24 @@ export default create({
     };
 
     watchEffect(() => {
-      isChecked = looseEqual(props.modelValue, props.trueValue);
+      isChecked.value = looseEqual(props.modelValue, props.trueValue);
     });
 
     const { size, label, name, disabled, submittedValue, animation } = reactive(
       props
     );
 
-    const changeEvt = (event: { target: HTMLInputElement }) => {
-      const isCheckedPrevious: boolean = isChecked;
+    const changeEvt = (event: any) => {
+      event?.stopPropagation();
       const isCheck: boolean = event.target.checked;
+      emit('update:modelValue', isCheck);
       emit(
         'input',
         isCheck ? props.trueValue : props.falseValue,
         props.label,
         event
       );
-      if (isCheckedPrevious !== isCheck) {
+      if (isChecked.value !== isCheck) {
         emit(
           'change',
           isCheck ? props.trueValue : props.falseValue,
@@ -107,7 +107,6 @@ export default create({
         );
       }
     };
-    console.log(isChecked);
 
     return {
       size,

src/packages/input/demo.vue

@@ -1,26 +1,27 @@
 <template>
   <div class="demo-nopading">
     <h2>基础用法</h2>
-    <nut-input v-model:value="state.val1" @change="change" label="标题：" />
+    <nut-input v-model:value="state.val1" @change="change" @focus="focus"  @blur="blur" label="标题：" />
 
     <nut-input
       placeholder="请输入文本"
       @change="change"
       v-model:value="state.val0"
-      requireShow="true"
+      :requireShow="true"
       label="标题："
+     @clear="clear"
     />
     <h2>禁用输入框</h2>
     <nut-input
       v-model:value="state.val2"
       @change="change"
-      disabled="true"
+      :disabled="true"
       label="标题："
     />
     <nut-input
       v-model:value="state.val3"
       @change="change"
-      readonly="true"
+      :readonly="true"
       label="标题："
     />
     <h2>限制输入长度</h2>
@@ -54,7 +55,7 @@
     <nut-input
       v-model:value="state.val7"
       @change="change"
-      autosize="true"
+      :autosize="true"
       type="textarea"
       placeholder="文本域"
       label="留言："
@@ -72,7 +73,7 @@
       v-model:value="state.val8"
       @change="change"
       rows="5"
-      limitShow="true"
+      :limitShow="true"
       maxLength="20"
       type="textarea"
       placeholder="设置输入五行"
@@ -104,9 +105,21 @@ export default createDemo({
     const change = (num: string | number) => {
       console.log('change: ', num);
     };
+    const focus=(num:string|number)=>{
+      console.log("focus:",num)
+    }
+    const blur=(num:string|number)=>{
+      console.log("blur:",num)
+    }
+    const clear=(num:string|number)=>{
+      console.log("clear:",num)
+    }
     return {
       state,
-      change
+      change,
+      blur,
+      clear,
+      focus
     };
   }
 });

src/packages/input/doc.md

@@ -1,3 +1,64 @@
+# Input 输入框组件
+
+### 介绍
+
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { input } from '@nutui/nutui';
+
+const app = createApp();
+app.use(input);
+
+```
+## 代码演示
+
+### 基础用法
+
+双向绑定
+
+```html
+<nut-input v-model:value="state.val1" @change="change" label="标题：" />
+
+```
+
+### 禁用和只读
+
+
+```html
+<nut-input v-model:value="state.val2" @change="change"  disabled="true" label="标题："/>
+<nut-input v-model:value="state.val3" @change="change" readonly="true"  label="标题："/>
+```
+
+### 限制输入长度
+
+```html
+ <nut-input v-model:value="state.val4" @change="change" maxLength="7" label="限制7：" />
+```
+### 其他类型
+
+```html
+<nut-input v-model:value="state.val0" @change="change" type="password" label="密码："/>
+<nut-input v-model:value="state.val5" @change="change" type="digit" label="整数：" />
+<nut-input v-model:value="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字："/>
+```
+### 文本域
+
+```html
+ <nut-input v-model:value="state.val7" @change="change" autosize="true" type="textarea" placeholder="文本域" label="留言："/>
+<nut-input v-model:value="state.val7" @change="change" rows="5" type="textarea" placeholder="设置输入五行"  label="留言："/>
+
+```
+### 文本域字数统计
+
+```html
+ <nut-input v-model:value="state.val8" @change="change" rows="5" limitShow="true" maxLength="20" type="textarea" placeholder="设置输入五行" label="留言："/>
+
+```
+
+
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | type         | 类型，可选值为 `text` `textarea` `number`  等 | String |`text`         |
@@ -5,22 +66,19 @@
 | placeholder         | 为空时占位符 | String |       -       |
 | placeholder-style | placeholder 样式     | String | - |
 | label          | 	左侧文案                       | string | -             |
-| has-border          | 	是否有边框                       | booleab | true            |
 | disabled          | 	是否禁用                       | boolean | `false`              |
 | readonly          | 是否只读                        | boolean | `false`               |
 | clear-btn       | 是否带清除按钮（icon）                        | boolean | `true`               |
 | required          | 是否带必填的*号，且blur事件做非空校验                       | boolean | `false`               |
 | maxlength          | 限制最长输入字符                   | string/number | -               |
+| rows          | textarea时高度                   | string/number | 2             |
 | limit-show          | textarea时是否展示输入字符。须设置maxlength                        | boolean | `false`               |
 
-
-事件
-| input          | 输入内容时触发                        | function | -               |
 | change          | 输入内容时触发                        | function | -               |
 | focus          | 聚焦时触发                        | function | -               |
 | blur          | 失焦时触发                        | function | -               |
 | clear          | 点击清空时触发                        | function | -               |
-| error          | 校验错误时触发                        | function | -               |
+
 
 
 

src/packages/input/index.scss

@@ -1,4 +1,5 @@
 .nut-input {
+    position: relative;
   width: 100%;
   padding: 10px 0px 10px 25px;
   display: flex;
@@ -18,7 +19,8 @@
   .nut-textinput-clear {
     width: 16px;
     height: 16px;
-    margin-right: 15px;
+    position: absolute;
+    right: 15px;
   }
   .nut-text {
     flex: 1;

src/packages/input/index.vue

@@ -34,23 +34,23 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
-      v-model="state.curretvalue"
+      :value="state.curretvalue"
       @input="valueChange"
-      @focus="focus"
-      @blur="blur"
+      @focus="valueFocus"
+      @blur="valueBlur"
     />
-    <!-- <view
+    <view
       @click="handleClear"
       class="nut-textinput-clear"
       v-if="!disableClear && !readonly"
-      v-show="type !== 'textarea' && active"
+      v-show="type !== 'textarea'  && active"
     >
       <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
         <path
           d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
         />
       </svg>
-    </view> -->
+    </view>
   </view>
 </template>
 <script lang="ts">
@@ -102,11 +102,11 @@ export default create({
     }
   },
   components: {},
-  emits: ['change', 'update:value', 'blur', 'focus'],
+  emits: ['change', 'update:value', 'blur', 'focus','clear'],
 
   setup(props, { emit }) {
     interface Events {
-      eventName: 'change';
+      eventName: 'change' | 'focus'|'blur';
       params: (string | number | Event)[];
     }
 
@@ -159,9 +159,9 @@ export default create({
       if (props.type == 'number') {
         val = formatNumber(val, false);
       }
-      state.textNum = val.length;
-      input.value = val;
-      state.curretvalue = val;
+       state.textNum = val.length;
+      // input.value = val;
+       //state.curretvalue = val;
       emitChange([
         {
           eventName: 'update:value',
@@ -173,7 +173,7 @@ export default create({
         }
       ]);
     };
-    const focus = (e: Event) => {
+    const valueFocus = (e: Event) => {
       active.value = true;
       const input = e.target as HTMLInputElement;
       let val = input.value;
@@ -189,21 +189,38 @@ export default create({
         }
       ]);
     };
-    const blur = () => {
-      //active.value = false;
-      // const input = e.target as HTMLInputElement;
-      // let val = input.value;
-      // emitChange([
-      //   {
-      //     eventName: 'update:modelValue',
-      //     params: [val]
-      //   },
-      //   {
-      //     eventName: 'focus',
-      //     params: [val]
-      //   }
-      // ]);
+    const valueBlur = (e: Event) => {
+      
+      setTimeout(()=>{
+active.value = false;
+      },400)
+      const input = e.target as HTMLInputElement;
+       let val = input.value;
+      val = String(val);
+      emitChange([
+        {
+          eventName: 'update:value',
+          params: [val]
+        },
+        {
+          eventName: 'blur',
+          params: [val]
+        }
+      ]);
     };
+    const handleClear=()=>{
+      const val="";
+      emitChange([
+        {
+          eventName: 'update:value',
+          params: [val]
+        },
+        {
+          eventName: 'clear',
+          params: [val]
+        }
+      ]);
+    }
     return {
       value,
       requireShow,
@@ -217,8 +234,9 @@ export default create({
       active,
       maxLength,
       valueChange,
-      focus,
-      blur,
+      valueFocus,
+      valueBlur,
+      handleClear,
       emitChange
     };
   }

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
     };
   }
 });