Commit 716d151a78a6790f9f638230b6374b98c0190e2e
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
examples/routers/layout.vue
| @@ -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
| @@ -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 |