fix: menu demo

components/menu/demo/index.vue

@@ -32,12 +32,12 @@ export default {
       <div>
         <md cn={md.cn} us={md.us}/>
         <Horizontal />
-        <InlineCollapsed />
         <Inline />
+        <InlineCollapsed />
         <SiderCurrent />
-        <SwitchMode />
-        <Theme />
         <Vertical />
+        <Theme />
+        <SwitchMode />
         <Template />
         <api>
           <CN slot='cn' />

components/menu/demo/switch-mode.md

@@ -11,9 +11,15 @@ Show the dynamic switching mode (between 'inline' and 'vertical').
 ```html
 <template>
 <div>
-  <a-checkbox @change="changeMode" /> Change Mode
+  <a-switch
+    :defaultChecked="false"
+    @change="changeMode"
+  /> Change Mode
   <span className="ant-divider" style="margin: 0 1em"/>
-  <a-checkbox @change="changeTheme" /> Change Theme
+  <a-switch
+    :defaultChecked="false"
+    @change="changeTheme"
+  /> Change Theme
   <br />
   <br />
   <a-menu
@@ -59,11 +65,11 @@ export default {
     }
   },
   methods: {
-    changeMode ({ target }) {
-      this.mode = target.checked ? 'vertical' : 'inline'
+    changeMode (checked) {
+      this.mode = checked ? 'vertical' : 'inline'
     },
-    changeTheme ({ target }) {
-      this.theme = target.checked ? 'dark' : 'light'
+    changeTheme (checked) {
+      this.theme = checked ? 'dark' : 'light'
     },
   },
 }

components/menu/demo/theme.md

@@ -11,7 +11,12 @@ There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 ```html
 <template>
 <div>
-  <a-checkbox @change="changeTheme" /> Change Theme
+  <a-switch
+    defaultChecked
+    @change="changeTheme"
+    checkedChildren="dark"
+    unCheckedChildren="light"
+  />
   <br />
   <br />
   <a-menu
@@ -63,8 +68,8 @@ export default {
       console.log('click ', e)
       this.current = e.key
     },
-    changeTheme ({ target }) {
-      this.theme = target.checked ? 'light' : 'dark'
+    changeTheme (checked) {
+      this.theme = checked ? 'dark' : 'light'
     },
   },
 }