diff --git a/docs/.vuepress/components/sakura-card.vue b/docs/.vuepress/components/sakura-card.vue
index 6106266..31f51ba 100644
--- a/docs/.vuepress/components/sakura-card.vue
+++ b/docs/.vuepress/components/sakura-card.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="card">
-     <div class="card-content">
-       <slot></slot>
-       <div>
-        <div v-if="codeVisible"><slot name="code"></slot></div>
+    <div class="card-content">
+      <slot></slot>
+      <div>
+        <div v-show="codeVisible"><slot name="code"></slot></div>
       </div>
     </div>
     <div class="card-operation" @click="toggle">
-         {{msg}}
+      {{msg}}
     </div>
  </div>
 </template>
@@ -37,6 +37,7 @@ export default {
       border-bottom:1px solid #ccc;
     }
     .card-operation{
+      cursor: pointer;
       height: 40px;
       display: flex;
       align-items: center;
diff --git a/docs/.vuepress/components/sakura-form.vue b/docs/.vuepress/components/sakura-form.vue
index 32f4b2c..24a83ed 100644
--- a/docs/.vuepress/components/sakura-form.vue
+++ b/docs/.vuepress/components/sakura-form.vue
@@ -70,41 +70,49 @@ export default {
         export default {
           data () {
             var checkName = (val) => {
-            if (val === 'Bingo') {
-                throw new Error('被骗了哈哈哈~')
-            } else { return true }
+              if (val === 'Bingo') {
+                  throw new Error('被骗了哈哈哈~')
+              } else { return true }
             }
             var checkAge = (val) => {
-            if (parseInt(val) > 30) {
-                throw new Error('不能超过30岁')
-            } else { return true }
+              if (parseInt(val) > 30) {
+                  throw new Error('不能超过30岁')
+              } else { return true }
             }
-              return {
-                user: {
-                  name: '',
-                  age: '',
-                  count:''
-                },
-                rules: {
-                  name: [
-                    { required: true, message: '请输入名字', trigger: 'blur' },
-                    { lengthControl: [3, 5], message: '长度在 3 到 5 个字符', trigger: 'blur' },
-                    { pattern: /^(\D)+$/, message: '内容不能有数字', trigger: 'blur' },
-                    { validator: checkName, trigger: 'blur' }
-                  ],
-                  age: [
-                    { required: true, message: '请输入年龄', trigger: 'blur' },
-                    { lengthControl: [ null, 2 ], message: '长度不能超过2', trigger: 'blur' },
-                    { pattern: /\d/, message: '必须是数字', trigger: 'blur' },
-                    { validator: checkAge, trigger: 'blur' }
-                  ],
-                  count: [
-                    { lengthControl: [ null, 4 ], message: '长度不能超过4', trigger: 'blur' }
-                  ]
-                }
-
+            return {
+              user: {
+                name: '',
+                age: '',
+                count:''
+              },
+              rules: {
+                name: [
+                  { required: true, message: '请输入名字', trigger: 'blur' },
+                  { lengthControl: [3, 5], message: '长度在 3 到 5 个字符', trigger: 'blur' },
+                  { pattern: /^(\D)+$/, message: '内容不能有数字', trigger: 'blur' },
+                  { validator: checkName, trigger: 'blur' }
+                ],
+                age: [
+                  { required: true, message: '请输入年龄', trigger: 'blur' },
+                  { lengthControl: [ null, 2 ], message: '长度不能超过2', trigger: 'blur' },
+                  { pattern: /\d/, message: '必须是数字', trigger: 'blur' },
+                  { validator: checkAge, trigger: 'blur' }
+                ],
+                count: [
+                  { lengthControl: [ null, 4 ], message: '长度不能超过4', trigger: 'blur' }
+                ]
               }
             }
+          },
+          methods: {
+            submit () {
+              this.$refs.form.validate(this.user)
+            },
+            reset(){
+              this.$refs.form.reset(this.user)
+            }
+          }
+        }
     `.replace(/^ {8}/gm, "").trim(),
       user: {
         name: '',
diff --git a/src/cascader/cascader.vue b/src/cascader/cascader.vue
index 9fb38b8..0882540 100644
--- a/src/cascader/cascader.vue
+++ b/src/cascader/cascader.vue
@@ -35,7 +35,10 @@ export default {
   created () {
   },
   mounted () {
-    this.addDocumentListener()
+    window.document.addEventListener('click', this.docClickHandler)
+  },
+  beforeDestroy () {
+    window.document.removeEventListener('click', this.docClickHandler)
   },
   computed: {
     content () {
@@ -43,14 +46,11 @@ export default {
     }
   },
   methods: {
-    addDocumentListener () {
-      let docClickHandler = (e) => {
-        if ((this.$refs.popper && this.$refs.popper.contains(e.target)) || this.$refs.content.contains(e.target)) {
-          return false
-        }
-        this.popoverVisible = false
+    docClickHandler (e) {
+      if ((this.$refs.popper && this.$refs.popper.contains(e.target)) || this.$refs.content.contains(e.target)) {
+        return false
       }
-      window.document.addEventListener('click', docClickHandler)
+      this.popoverVisible = false
     },
     onItemUpdateSelected (newSelected) {
       this.$emit('update:selected', newSelected)
diff --git a/src/notice/toast.vue b/src/notice/toast.vue
index 4190a85..4e8fd7b 100644
--- a/src/notice/toast.vue
+++ b/src/notice/toast.vue
@@ -54,15 +54,15 @@ export default {
         return ['top', 'middle', 'bottom'].includes(val)
       }
     },
-    type:{
+    type: {
       type: String,
       default: 'info',
-      validator(val){
-        return ['info','warning','success', 'error'].includes(val)
+      validator (val) {
+        return ['info', 'warning', 'success', 'error'].includes(val)
       }
     }
   },
-  components:{
+  components: {
     's-icon': Icon
   },
   mounted () {
@@ -99,9 +99,12 @@ export default {
      .outer{
         z-index: 30;
         position: fixed;
-        left:50%;
-        transform: translate(-50%);
-        
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: fit-content;
+        height: fit-content;
+
         &.show-on-top{
             top: 20px;
             .toast-wrapper{
@@ -109,8 +112,8 @@ export default {
             }
         }
         &.show-on-middle{
-            top:50%;
-            transform: translate(-50%,-50%);
+            top: 0;
+            bottom: 0;
             .toast-wrapper{
                 animation:fade-in 0.5s;
             }
@@ -151,7 +154,7 @@ export default {
             /deep/ .s-icon{
               margin-right:10px;
             }
-            
+
         }
         .close-btn{
             padding: 0 1.2em;