Merge pull request #2668 from lison16/layout

update Layout

examples/routers/layout.vue

@@ -4,6 +4,7 @@
             <Sider 
                 v-model="isCollapsed"
                 collapsed-width="0" 
+                hide-trigger
                 collapsible
                 ref="side"
                 width="200">
@@ -29,6 +30,7 @@
                         </MenuItem>
                     </MenuGroup>
                 </Menu>
+                <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
             </Sider>
             <Layout class-name="test-class">
                 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
@@ -51,6 +53,11 @@ export default {
         toggleCollapse () {
             this.$refs.side.toggleCollapse();
         }
+    },
+    watch: {
+        isCollapsed (val) {
+            // console.log(val)
+        }
     }
 };
 </script>

src/components/layout/sider.vue

@@ -8,9 +8,11 @@
         <div :class="childClasses">
             <slot></slot>
         </div>
+        <slot name="trigger">
             <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
                 <i :class="triggerIconClasses"></i>
             </div>
+        </slot>
     </div>
 </template>
 <script>
@@ -39,7 +41,6 @@
             },
             breakpoint: {
                 type: String,
-                default: 'md',
                 validator (val) {
                     return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
                 }
@@ -115,8 +116,8 @@
         methods: {
             toggleCollapse () {
                 this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
-                this.$emit('input', !this.isCollapsed);
+                this.$emit('input', this.isCollapsed);
-                this.$emit('on-collapse', !this.isCollapsed);
+                this.$emit('on-collapse', this.isCollapsed);
             },
             matchMedia () {
                 let matchMedia;
@@ -137,15 +138,23 @@
             }
         },
         mounted () {
-            on(window, 'resize', this.onWindowResize);
-            this.matchMedia();
-            this.$emit('input', this.defaultCollapsed);
             if (this.defaultCollapsed) {
                 this.isCollapsed = true;
+                this.$emit('input', this.defaultCollapsed);
+            } else {
+                if (this.value !== undefined) {
+                    this.isCollapsed = this.value;
+                }
+            }
+            if (this.breakpoint !== undefined) {
+                on(window, 'resize', this.onWindowResize);
+                this.matchMedia();
             }
         },
-        destroyed () {
+        beforeDestroy () {
+            if (this.breakpoint !== undefined) {
                 off(window, 'resize', this.onWindowResize);
             }
+        }
     };
 </script>