From e2351115ba5251f9d5d1ca6ccfe5782a1dabe2c2 Mon Sep 17 00:00:00 2001
From: Yzy <954478466@qq.com>
Date: Tue, 27 Apr 2021 22:29:25 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 text.txt | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 text.txt

diff --git a/text.txt b/text.txt
new file mode 100644
index 00000000..e69de29b

From 848a19c2b8518dc3b7d64b0da13707ad4207cd6e Mon Sep 17 00:00:00 2001
From: 954478466 <63104537+954478466@users.noreply.github.com>
Date: Tue, 27 Apr 2021 22:34:00 +0800
Subject: [PATCH 2/6] Delete text.txt

---
 text.txt | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 text.txt

diff --git a/text.txt b/text.txt
deleted file mode 100644
index e69de29b..00000000

From 80eafbe69d65656d31d118053eec34edc78b89d4 Mon Sep 17 00:00:00 2001
From: Yzy <954478466@qq.com>
Date: Thu, 29 Apr 2021 16:42:04 +0800
Subject: [PATCH 3/6] master

---
 packages/more/more.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/more/more.vue b/packages/more/more.vue
index 6121ad28..3cd0c05d 100644
--- a/packages/more/more.vue
+++ b/packages/more/more.vue
@@ -1,8 +1,9 @@
 <template lang="pug">
-.zi-more(@click="toggleHandler")
+.zi-more
   zi-button.zi-more-slot(
     circular size="small"
     :loading="loading"
+    @click="toggleHandler"
   ) {{ statusText }}
 </template>
 

From 73615538dd8df5d258b92cb69e85e16dbc9e1ec4 Mon Sep 17 00:00:00 2001
From: Yzy <954478466@qq.com>
Date: Thu, 29 Apr 2021 18:34:24 +0800
Subject: [PATCH 4/6] Add toggle size property

---
 packages/toggle/toggle.styl | 26 ++++++++++++++++++++------
 packages/toggle/toggle.vue  | 27 ++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/packages/toggle/toggle.styl b/packages/toggle/toggle.styl
index f21ad6d7..c7fce654 100644
--- a/packages/toggle/toggle.styl
+++ b/packages/toggle/toggle.styl
@@ -10,7 +10,23 @@
   width rem(28)
   cursor pointer
 
+  &.mini
+    height rem(13.36)
+    width rem(26.72)
+    border-radius rem(13.36)
+    line-height rem(13.36)
+  &.medium
+    height rem(14)
+    width rem(28)
+    border-radius rem(14)
+    line-height rem(14)
+  &.large
+    height rem(16)
+    width rem(32)
+    border-radius rem(16)
+    line-height rem(16)
   &.checked
+    
     background-color var(--geist-success)
     border 1px solid var(--geist-success)
 
@@ -18,7 +34,7 @@
       background-color var(--accents-4)
       border-color var(--accents-4)
 
-    &:before
+    .inner
       right 0
       transform translate(0, -50%)
 
@@ -26,15 +42,12 @@
     background-color var(--accents-1)
     cursor not-allowed
 
-    &:before
+    .inner
       background-color var(--accents-2)
       border-color var(--accents-2)
 
-  &:before
-    content ''
+  .inner
     position absolute
-    width rem(12)
-    height rem(12)
     top 50%
     transition-property right, transform
     transition-duration .28s
@@ -45,3 +58,4 @@
     transition-timing-function cubic-bezier(0, 0, 0.2, 1)
     background-color var(--geist-background)
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+
diff --git a/packages/toggle/toggle.vue b/packages/toggle/toggle.vue
index b7962f73..8885ad42 100644
--- a/packages/toggle/toggle.vue
+++ b/packages/toggle/toggle.vue
@@ -1,18 +1,43 @@
 <template lang="pug">
-.zi-toggle(@click="clickHandler" :class="{ checked: !!model, disabled }")
+.zi-toggle(@click="clickHandler" :class="[{ checked: !!model, disabled }, size]")
+  .inner(:style="{ width: innerSwitchRect, height: innerSwitchRect }")
 </template>
 
 <script>
 export default {
   name: 'zi-toggle',
+  beforeMount() {
+    const basic = '2px';
+    switch (this.size) {
+      case 'mini':
+        this.innerSwitchRect=  `calc(.835rem - ${basic})`;
+        break;
+      case 'medium':  
+        this.innerSwitchRect=  `calc(.875rem - ${basic})`;   
+        break;
+      case 'large':    
+        this.innerSwitchRect=  `calc(1rem - ${basic})`; 
+        break;           
+      default:
+        break;
+    }
+  },
 
   data: () => ({
     privateModel: undefined,
+    innerSwitchRect: '',
   }),
 
   props: {
     value: [String, Number, Boolean],
     disabled: Boolean,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['mini', 'medium', 'large'].indexOf(value) !== -1
+      }
+    }
   },
 
   computed: {

From b29ac24bd2f94d7c20cfb3b099d40b376d7dd787 Mon Sep 17 00:00:00 2001
From: Yzy <954478466@qq.com>
Date: Thu, 29 Apr 2021 19:26:12 +0800
Subject: [PATCH 5/6] Add toggle size properties, modify the document

---
 docs/en-us/components/toggle.md | 10 ++++++----
 docs/zh-cn/components/toggle.md | 11 ++++++-----
 packages/toggle/toggle.styl     |  3 +++
 packages/toggle/toggle.vue      | 31 ++++++++++++++++---------------
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/docs/en-us/components/toggle.md b/docs/en-us/components/toggle.md
index e5d42655..806fb832 100644
--- a/docs/en-us/components/toggle.md
+++ b/docs/en-us/components/toggle.md
@@ -8,9 +8,11 @@ Displays a boolean value.
 
 <ex-footer edit-link="https://github.com/geist-org/vue/edit/master/docs/en-us/components/toogle.md">
 
-| Attribute    | Description            | Type                        | Accepted values  | Default |
-| ------------ | ---------------------- | --------------------------- | ---------------- | ------- |
-| **v-model**  | binding value[v-model] | `string | number | boolean` | -                | -       |
-| **disabled** | disable toggle         | `boolean`                   | `true` / `false` | `false` |
+| Attribute    | Description            | Type                        | Accepted values     | Default  |
+| ------------ | ---------------------- | --------------------------- | ------------------- | -------- |
+| **v-model**  | binding value[v-model] | `string | number | boolean` | -                   | -        |
+| **disabled** | disable toggle         | `boolean`                   | `true` / `false`    | `false`  |
+| **size**     | component size         | `string`                    | `mini/medium/large` | `medium` |
 
 </ex-footer>
+
diff --git a/docs/zh-cn/components/toggle.md b/docs/zh-cn/components/toggle.md
index 15c9888f..bdd05342 100644
--- a/docs/zh-cn/components/toggle.md
+++ b/docs/zh-cn/components/toggle.md
@@ -8,9 +8,10 @@
 
 <ex-footer edit-link="https://github.com/geist-org/vue/edit/master/docs/en-us/components/toogle.md">
 
-| 属性         | 描述             | 类型                        | 推荐值 | 默认    |
-| ------------ | ---------------- | --------------------------- | ------ | ------- |
-| **v-model**  | `v-model` 绑定值 | `string | number | boolean` | -      | -       |
-| **disabled** | 是否禁用         | `boolean`                   | -      | `false` |
+| 属性         | 描述             | 类型                        | 推荐值              | 默认     |
+| ------------ | ---------------- | --------------------------- | ------------------- | -------- |
+| **v-model**  | `v-model` 绑定值 | `string | number | boolean` | -                   | -        |
+| **disabled** | 是否禁用         | `boolean`                   | -                   | `false`  |
+| **size**     | 组件尺寸         | `string`                    | `mini/medium/large` | `medium` |
 
-</ex-footer>
+</ex-footer>
\ No newline at end of file
diff --git a/packages/toggle/toggle.styl b/packages/toggle/toggle.styl
index c7fce654..62ad7eef 100644
--- a/packages/toggle/toggle.styl
+++ b/packages/toggle/toggle.styl
@@ -15,16 +15,19 @@
     width rem(26.72)
     border-radius rem(13.36)
     line-height rem(13.36)
+
   &.medium
     height rem(14)
     width rem(28)
     border-radius rem(14)
     line-height rem(14)
+
   &.large
     height rem(16)
     width rem(32)
     border-radius rem(16)
     line-height rem(16)
+    
   &.checked
     
     background-color var(--geist-success)
diff --git a/packages/toggle/toggle.vue b/packages/toggle/toggle.vue
index 8885ad42..e50d636e 100644
--- a/packages/toggle/toggle.vue
+++ b/packages/toggle/toggle.vue
@@ -1,25 +1,26 @@
 <template lang="pug">
-.zi-toggle(@click="clickHandler" :class="[{ checked: !!model, disabled }, size]")
-  .inner(:style="{ width: innerSwitchRect, height: innerSwitchRect }")
+.zi-toggle(@click='clickHandler', :class='[{ checked: !!model, disabled }, size]', ref='ziToggle')
+  .inner(:style='{ width: innerSwitchRect, height: innerSwitchRect }')
 </template>
 
 <script>
 export default {
   name: 'zi-toggle',
-  beforeMount() {
-    const basic = '2px';
+  mounted() {
+    const width = this.$refs.ziToggle.getBoundingClientRect().height + 'px'
+    const basic = '2px'
     switch (this.size) {
       case 'mini':
-        this.innerSwitchRect=  `calc(.835rem - ${basic})`;
-        break;
-      case 'medium':  
-        this.innerSwitchRect=  `calc(.875rem - ${basic})`;   
-        break;
-      case 'large':    
-        this.innerSwitchRect=  `calc(1rem - ${basic})`; 
-        break;           
+        this.innerSwitchRect = `calc(${width} - ${basic})`
+        break
+      case 'medium':
+        this.innerSwitchRect = `calc(${width} - ${basic})`
+        break
+      case 'large':
+        this.innerSwitchRect = `calc(${width} - ${basic})`
+        break
       default:
-        break;
+        break
     }
   },
 
@@ -36,8 +37,8 @@ export default {
       default: 'medium',
       validator: function (value) {
         return ['mini', 'medium', 'large'].indexOf(value) !== -1
-      }
-    }
+      },
+    },
   },
 
   computed: {

From 056c81a7e87448c4c5c6597ad01a7cda0fb7ae11 Mon Sep 17 00:00:00 2001
From: Yzy <954478466@qq.com>
Date: Thu, 29 Apr 2021 20:08:07 +0800
Subject: [PATCH 6/6] Add toggle size properties, modify the document

---
 docs/examples/toggle/basic.vue |  5 ++++-
 packages/toggle/toggle.vue     | 14 +-------------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/docs/examples/toggle/basic.vue b/docs/examples/toggle/basic.vue
index 2a23cf66..04714305 100644
--- a/docs/examples/toggle/basic.vue
+++ b/docs/examples/toggle/basic.vue
@@ -1,5 +1,8 @@
 <template lang="pug">
-zi-toggle(v-model="value")
+div
+  zi-toggle(v-model="value" size='mini' style="margin-right: 10px;")
+  zi-toggle(v-model="value" size='medium' style="margin-right: 10px;")
+  zi-toggle(v-model="value" size='large')
 </template>
 
 <script>
diff --git a/packages/toggle/toggle.vue b/packages/toggle/toggle.vue
index e50d636e..7d9d30f1 100644
--- a/packages/toggle/toggle.vue
+++ b/packages/toggle/toggle.vue
@@ -9,19 +9,7 @@ export default {
   mounted() {
     const width = this.$refs.ziToggle.getBoundingClientRect().height + 'px'
     const basic = '2px'
-    switch (this.size) {
-      case 'mini':
-        this.innerSwitchRect = `calc(${width} - ${basic})`
-        break
-      case 'medium':
-        this.innerSwitchRect = `calc(${width} - ${basic})`
-        break
-      case 'large':
-        this.innerSwitchRect = `calc(${width} - ${basic})`
-        break
-      default:
-        break
-    }
+    this.innerSwitchRect = `calc(${width} - ${basic})`
   },
 
   data: () => ({