feat(switch): 拆分特性demo

Signed-off-by: jacknan <[email protected]>
opentiny · Nov 20, 2023 · 2706659 · 2706659
1 parent 9bcfc7b
commit 2706659
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 40 deletions.
diff --git a/examples/sites/demos/mobile/app/switch/base.vue b/examples/sites/demos/mobile/app/switch/base.vue
@@ -1,17 +1,7 @@
 <template>
   <div class="switch-wrap">
     <p>默认</p>
-    <tiny-switch v-model="value1" true-value="1" @change="handleChange"></tiny-switch>
-    <p>小尺寸</p>
-    <tiny-switch v-model="value2" @change="handleChange" small mini></tiny-switch>
-    <p>不可用-开</p>
-    <tiny-switch :modelValue="true" @change="handleChange" disabled></tiny-switch>
-    <p>不可用-关</p>
-    <tiny-switch :modelValue="false" @change="handleChange" disabled></tiny-switch>
-    <p>加载状态</p>
-    <tiny-switch :modelValue="true" @change="handleChangeLoading1" :loading="loading1"></tiny-switch>
-    <p>加载状态-小尺寸</p>
-    <tiny-switch :modelValue="true" @change="handleChangeLoading2" :loading="loading2" mini></tiny-switch>
+    <tiny-switch v-model="value1" true-value="1"></tiny-switch>
   </div>
 </template>
 
@@ -24,28 +14,7 @@ export default {
   },
   data() {
     return {
-      value1: '1',
-      value2: true,
-      loading1: false,
-      loading2: false
-    }
-  },
-  methods: {
-    handleChange(val) {
-      let msg = val ? '已开启' : '已关闭'
-      console.log(msg)
-    },
-    handleChangeLoading1() {
-      this.loading1 = true
-      setTimeout(() => {
-        this.loading1 = false
-      }, 2000)
-    },
-    handleChangeLoading2() {
-      this.loading2 = true
-      setTimeout(() => {
-        this.loading2 = false
-      }, 2000)
+      value1: '1'
     }
   }
 }

diff --git a/examples/sites/demos/mobile/app/switch/disabled.vue b/examples/sites/demos/mobile/app/switch/disabled.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="switch-wrap">
+    <p>不可用-开</p>
+    <tiny-switch :modelValue="true" disabled></tiny-switch>
+    <p>不可用-关</p>
+    <tiny-switch :modelValue="false" disabled></tiny-switch>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/switch/event.vue b/examples/sites/demos/mobile/app/switch/event.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="switch-wrap">
+    <p>默认</p>
+    <tiny-switch v-model="value1" true-value="1" @change="handleChange"></tiny-switch>
+    <span class="status">{{ status }}</span>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      value1: '1',
+      status: '已开启'
+    }
+  },
+  methods: {
+    handleChange(val) {
+      this.status = val ? '已开启' : '已关闭'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+
+  .status {
+    margin-left: 20px;
+  }
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/switch/loading.vue b/examples/sites/demos/mobile/app/switch/loading.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="switch-wrap">
+    <p>加载状态</p>
+    <tiny-switch :modelValue="true" @change="handleChangeLoading1" :loading="loading1"></tiny-switch>
+    <p>加载状态-小尺寸</p>
+    <tiny-switch :modelValue="true" @change="handleChangeLoading2" :loading="loading2" mini></tiny-switch>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      loading1: false,
+      loading2: false
+    }
+  },
+  methods: {
+    handleChangeLoading1() {
+      this.loading1 = true
+      setTimeout(() => {
+        this.loading1 = false
+      }, 2000)
+    },
+    handleChangeLoading2() {
+      this.loading2 = true
+      setTimeout(() => {
+        this.loading2 = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/switch/mini.vue b/examples/sites/demos/mobile/app/switch/mini.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="switch-wrap">
+    <p>小尺寸</p>
+    <tiny-switch mini></tiny-switch>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch: Switch
+  }
+}
+</script>
+
+<style scoped>
+.switch-wrap {
+  padding: 20px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/switch/webdoc/switch.js b/examples/sites/demos/mobile/app/switch/webdoc/switch.js
@@ -13,6 +13,54 @@ export default {
         'en-US': '<p>base</p>'
       },
       codeFiles: ['base.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '状态不可用',
+        'en-US': 'disabled'
+      },
+      desc: {
+        'zh-CN': '<p>状态不可用</p>',
+        'en-US': '<p>disabled</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'loading',
+      name: {
+        'zh-CN': '加载状态',
+        'en-US': 'loading'
+      },
+      desc: {
+        'zh-CN': '<p>加载中状态</p>',
+        'en-US': '<p>loading</p>'
+      },
+      codeFiles: ['loading.vue']
+    },
+    {
+      demoId: 'mini',
+      name: {
+        'zh-CN': '小尺寸',
+        'en-US': 'mini'
+      },
+      desc: {
+        'zh-CN': '<p>小尺寸</p>',
+        'en-US': '<p>mini</p>'
+      },
+      codeFiles: ['mini.vue']
+    },
+    {
+      demoId: 'event',
+      name: {
+        'zh-CN': '开关状态改变事件',
+        'en-US': 'switch status event'
+      },
+      desc: {
+        'zh-CN': '<p>开关的状态改变事件</p>',
+        'en-US': '<p>switch status event</p>'
+      },
+      codeFiles: ['event.vue']
     }
   ],
   apis: [
@@ -28,7 +76,7 @@ export default {
             'zh-CN': '<p>是否禁用，该属性默认为false</p>',
             'en-US': 'display different button'
           },
-          demoId: 'base'
+          demoId: 'disabled'
         },
         {
           name: 'false-value',
@@ -68,7 +116,7 @@ export default {
             'zh-CN': '<p>小尺寸</p>',
             'en-US': 'mini'
           },
-          demoId: 'base'
+          demoId: 'mini'
         }
       ],
       events: [
@@ -80,7 +128,7 @@ export default {
             'zh-CN': '<p>switch 状态发生变化时的回调函数,可获取新状态的值</p>',
             'en-US': 'Click'
           },
-          demoId: 'switch-event-change'
+          demoId: 'event'
         }
       ]
     }

diff --git a/packages/vue/src/switch/src/index.ts b/packages/vue/src/switch/src/index.ts
@@ -69,10 +69,6 @@ export const switchProps = {
   loading: {
     type: Boolean,
     default: false
-  },
-  small: {
-    type: Boolean,
-    default: false
   }
 }