other / mew-iview

Commit 716d151a78a6790f9f638230b6374b98c0190e2e

Authored by zhigang.li
1 parent ad74efbc

make it will not collapse when didn't set 'breakpoint'

Showing 2 changed files with 19 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/layout.vue
  Show/Hide comments   View file @716d151
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 <Sider 4 <Sider
5 v-model="isCollapsed" 5 v-model="isCollapsed"
6 collapsed-width="0" 6 collapsed-width="0"
  7 + hide-trigger
7 collapsible 8 collapsible
8 ref="side" 9 ref="side"
9 width="200"> 10 width="200">
@@ -29,6 +30,7 @@ @@ -29,6 +30,7 @@
29 </MenuItem> 30 </MenuItem>
30 </MenuGroup> 31 </MenuGroup>
31 </Menu> 32 </Menu>
  33 + <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
32 </Sider> 34 </Sider>
33 <Layout class-name="test-class"> 35 <Layout class-name="test-class">
34 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header> 36 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
@@ -51,6 +53,11 @@ export default { @@ -51,6 +53,11 @@ export default {
51 toggleCollapse () { 53 toggleCollapse () {
52 this.$refs.side.toggleCollapse(); 54 this.$refs.side.toggleCollapse();
53 } 55 }
  56 + },
  57 + watch: {
  58 + isCollapsed (val) {
  59 + // console.log(val)
  60 + }
54 } 61 }
55 }; 62 };
56 </script> 63 </script>
src/components/layout/sider.vue
  Show/Hide comments   View file @716d151
@@ -8,9 +8,11 @@ @@ -8,9 +8,11 @@
8 <div :class="childClasses"> 8 <div :class="childClasses">
9 <slot></slot> 9 <slot></slot>
10 </div> 10 </div>
11 - <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">  
12 - <i :class="triggerIconClasses"></i>  
13 - </div> 11 + <slot name="trigger">
  12 + <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
  13 + <i :class="triggerIconClasses"></i>
  14 + </div>
  15 + </slot>
14 </div> 16 </div>
15 </template> 17 </template>
16 <script> 18 <script>
@@ -39,7 +41,6 @@ @@ -39,7 +41,6 @@
39 }, 41 },
40 breakpoint: { 42 breakpoint: {
41 type: String, 43 type: String,
42 - default: 'md',  
43 validator (val) { 44 validator (val) {
44 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']); 45 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
45 } 46 }
@@ -145,11 +146,15 @@ @@ -145,11 +146,15 @@
145 this.isCollapsed = this.value; 146 this.isCollapsed = this.value;
146 } 147 }
147 } 148 }
148 - on(window, 'resize', this.onWindowResize);  
149 - this.matchMedia(); 149 + if (this.breakpoint !== undefined) {
  150 + on(window, 'resize', this.onWindowResize);
  151 + this.matchMedia();
  152 + }
150 }, 153 },
151 destroyed () { 154 destroyed () {
152 - off(window, 'resize', this.onWindowResize); 155 + if (this.breakpoint !== undefined) {
  156 + off(window, 'resize', this.onWindowResize);
  157 + }
153 } 158 }
154 }; 159 };
155 </script> 160 </script>
156 \ No newline at end of file 161 \ No newline at end of file