chenhaodong / 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 4 <Sider
5 5 v-model="isCollapsed"
6 6 collapsed-width="0"
  7 + hide-trigger
7 8 collapsible
8 9 ref="side"
9 10 width="200">
... ... @@ -29,6 +30,7 @@
29 30 </MenuItem>
30 31 </MenuGroup>
31 32 </Menu>
  33 + <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
32 34 </Sider>
33 35 <Layout class-name="test-class">
34 36 <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">่œๅ•</Button></Header>
... ... @@ -51,6 +53,11 @@ export default {
51 53 toggleCollapse () {
52 54 this.$refs.side.toggleCollapse();
53 55 }
  56 + },
  57 + watch: {
  58 + isCollapsed (val) {
  59 + // console.log(val)
  60 + }
54 61 }
55 62 };
56 63 </script>
... ...
src/components/layout/sider.vue
  Show/Hide comments   View file @716d151
... ... @@ -8,9 +8,11 @@
8 8 <div :class="childClasses">
9 9 <slot></slot>
10 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 16 </div>
15 17 </template>
16 18 <script>
... ... @@ -39,7 +41,6 @@
39 41 },
40 42 breakpoint: {
41 43 type: String,
42   - default: 'md',
43 44 validator (val) {
44 45 return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
45 46 }
... ... @@ -145,11 +146,15 @@
145 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 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 160 </script>
156 161 \ No newline at end of file
... ...