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

src/packages/shortpassword/demo.vue

@@ -74,7 +74,6 @@ const { createDemo } = createComponent('shortpassword');
 export default createDemo({
   setup() {
     let { ctx } = getCurrentInstance() as any;
-    console.log(ctx);
 
     const state = reactive({
       visible: false,

src/packages/switch/demo.vue

 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell class="switch-adjust">
-      {{ text }}
-      <nut-switch
-        @switch-change="switchChange"
-        class="switch-decoration"
-      ></nut-switch>
+    <nut-cell>
+      <nut-switch v-model="checked" />
     </nut-cell>
 
     <h2>禁用状态</h2>
-    <nut-cell class="switch-adjust">
-      {{ text }}
-      <nut-switch class="switch-decoration" disable></nut-switch>
+    <nut-cell>
+      <nut-switch v-model="checked" disable />
     </nut-cell>
 
     <h2>change事件</h2>
-    <nut-cell class="switch-adjust">
-      chane
-      <nut-switch
-        @switch-change="change"
-        class="switch-decoration"
-      ></nut-switch>
+    <nut-cell>
+      <nut-switch v-model="checked" @change="change" />
+    </nut-cell>
+
+    <h2>异步控制</h2>
+    <nut-cell>
+      <nut-switch :model-value="checkedAsync" @change="changeAsync" />
     </nut-cell>
 
     <h2>自定义颜色</h2>
-    <nut-cell class="switch-adjust">
-      color
-      <nut-switch active-color="blue" class="switch-decoration"></nut-switch>
+    <nut-cell>
+      <nut-switch
+        v-model="checked"
+        @change="switchChange"
+        active-color="blue"
+      />
     </nut-cell>
 
     <h2>支持文字</h2>
-    <nut-cell class="switch-adjust">
-      text
-      <nut-switch class="switch-decoration" label="开    关"></nut-switch>
+    <nut-cell>
+      <nut-switch
+        v-model="checked"
+        @change="switchChange"
+        active-text="开"
+        inactive-text="关"
+      />
     </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from 'vue';
+import { ref, getCurrentInstance } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('switch');
 export default createDemo({
-  props: {},
   setup() {
-    const response = reactive({
-      text: '开'
-    });
-    const switchChange = (event: Event, isOpen: boolean) => {
-      response.text = isOpen ? '开' : '关';
+    let { ctx } = getCurrentInstance() as any;
+    const checked = ref(true);
+    const checkedAsync = ref(true);
+
+    const change = (value: boolean, event: Event) => {
+      ctx.$toast.text(`触发了change事件，开关状态：${value}`);
     };
-    const change = (event: Event, isOpen: boolean) => {
-      alert(`触发了change事件,开关状态：${isOpen}`);
+    const changeAsync = (value: boolean, event: Event) => {
+      ctx.$toast.text(`2秒后异步触发 ${value}`);
+      setTimeout(() => {
+        checkedAsync.value = value;
+      }, 2000);
     };
 
     return {
-      ...toRefs(response),
-      switchChange,
-      change
+      checked,
+      checkedAsync,
+      change,
+      changeAsync
     };
   }
 });
 </script>
 
-<style lang="scss" scoped>
-.switch-adjust {
-  color: rgba(102, 102, 102, 1);
-  justify-content: space-between;
-  align-items: center;
-}
-
-.switch-decoration {
-  cursor: pointer;
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/switch/doc.md

-#  switch组件
+#  Switch组件
 
 ### 介绍
 
@@ -9,7 +9,6 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Switch } from '@nutui/nutui';
-
 const app = createApp();
 app.use(Switch);
 
@@ -20,57 +19,99 @@ app.use(Switch);
 ### 基础用法
 
 ``` html
-<nut-switch></nut-switch>
+<nut-switch v-model="checked" />
+```
+``` javascript
+import { ref } from 'vue';
+export default {
+  setup() {
+    const checked = ref(true);
+    return { checked };
+  },
+};
 ```
 
 ### 禁用状态
 
 ``` html
-<nut-switch disable></nut-switch>
+<nut-switch v-model="checked" disable />
 ```
 
 ### change事件
 
 ``` html
-<nut-switch @switch-change="change"></nut-switch>
+<nut-switch v-model="checked" @change="change" />
 ```
-
 ``` javascript
+import { ref, getCurrentInstance } from 'vue';
 export default {
   setup() {
-    const change = (event: Event, isOpen: boolean) => {
-      console.log('触发了change事件,开关状态：', isOpen);
+    let { ctx } = getCurrentInstance() as any;
+    const checked = ref(true);
+    const change = (value: boolean, event: Event) => {
+      ctx.$toast.text(`触发了change事件，开关状态：${value}`);
     };
-    
     return {
+      checked,
       change
     };
   }
 };
 ```
 
+### 异步控制
+
+``` html
+<nut-switch :model-value="checkedAsync" @change="changeAsync" />
+```
+``` javascript
+import { ref, getCurrentInstance } from 'vue';
+export default {
+  setup() {
+    let { ctx } = getCurrentInstance() as any;
+    const checkedAsync = ref(true);
+    const changeAsync = (value: boolean, event: Event) => {
+      ctx.$toast.text(`2秒后异步触发 ${value}`);
+      setTimeout(() => {
+        checkedAsync.value = value;
+      }, 2000);
+    };
+    
+    return {
+      checkedAsync,
+      changeAsync
+    };
+  }
+};
+```
 ### 自定义颜色
 
 ``` html
-<nut-switch active-color="blue"></nut-switch>
+<nut-switch v-model="checked" @change="switchChange" active-color="blue" />
+```
+### 支持文字
+
+``` html
+<nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
 ```
 
 ## API
 
 ### Props
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| status         | 开关状态               | Boolean | `true` |
-| disable         | 禁用状态               | Boolean | `false` |
-| active-color        | 开关打开时的背景颜色  | String | `rgb(250,63,25,1)`                |
-| inactive-color         | 开关关闭时的背景颜色 | String | `rgba(235,235,235,1)`         |
-| label         | 支持内嵌文字,两种状态使用空格隔开 | String | -         |
+| 参数           | 说明             | 类型    | 默认值                |
+|----------------|------------------|---------|-----------------------|
+| v-model        | 开关状态         | Boolean | `false`               |
+| disable        | 禁用状态         | Boolean | `false`               |
+| active-color   | 打开时的背景颜色 | String  | `#fa2c19`    |
+| inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
+| active-text    | 打开时文字描述   | String  | -                     |
+| inactive-text  | 关闭时文字描述   | String  | -                     |
 
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| switch-change  | 切换开关时触发 | (event: Event, isOpen: boolean) |
+| 事件名 | 说明           | 回调参数                      |
+|--------|----------------|-------------------------------|
+| change | 切换开关时触发 | (value: boolean,event: Event) |
     
\ No newline at end of file

src/packages/switch/index.scss

 .nut-switch {
+  cursor: pointer;
   display: flex;
   align-items: center;
   background-color: $primary-color;
@@ -25,10 +26,10 @@
       color: $white;
       font-size: $font-size-1;
       &.open {
-        transform: translateX(-14px);
+        transform: translateX(-16px);
       }
       &.close {
-        transform: translateX(14px);
+        transform: translateX(16px);
       }
     }
   }

src/packages/switch/index.vue

@@ -2,13 +2,13 @@
   <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
       <view v-show="!isOpen" class="close-line"></view>
-      <template v-if="label">
+      <template v-if="activeText">
         <view class="nut-switch-label open" v-show="isOpen">{{
-          label.split(/\s+/)[0]
+          activeText
+        }}</view>
+        <view class="nut-switch-label close" v-show="!isOpen">{{
+          inactiveText
         }}</view>
-        <div class="nut-switch-label close" v-show="!isOpen">{{
-          label.split(/\s+/)[1]
-        }}</div>
       </template>
     </view>
   </view>
@@ -21,7 +21,11 @@ const { componentName, create } = createComponent('switch');
 
 export default create({
   props: {
-    status: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
       type: Boolean,
       default: true
     },
@@ -31,26 +35,28 @@ export default create({
     },
     activeColor: {
       type: String,
-      default: 'rgba(250,63,25,1)'
+      default: ''
     },
     inactiveColor: {
       type: String,
-      default: 'rgba(235,235,235,1)'
+      default: ''
     },
-    label: {
+    activeText: {
+      type: String,
+      default: ''
+    },
+    inactiveText: {
       type: String,
       default: ''
     }
   },
-
+  emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
-    let isOpen = ref(props.status ? props.status : true);
-
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [isOpen.value ? 'switch-open' : 'switch-close']: true,
+        [props.modelValue ? 'switch-open' : 'switch-close']: true,
         [`${prefixCls}-disable`]: props.disable,
         [`${prefixCls}-base`]: true
       };
@@ -58,18 +64,19 @@ export default create({
 
     const style = computed(() => {
       return {
-        backgroundColor: isOpen.value ? props.activeColor : props.inactiveColor
+        backgroundColor: props.modelValue
+          ? props.activeColor
+          : props.inactiveColor
       };
     });
 
-    const onClick = () => {
+    const onClick = (event: Event) => {
       if (props.disable) return;
-      isOpen.value = !isOpen.value;
-      emit('switch-change', event, isOpen.value);
+      emit('update:modelValue', !props.modelValue);
+      emit('change', !props.modelValue, event);
     };
 
     return {
-      isOpen,
       classes,
       style,
       onClick