drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
zhigang.li 2017-12-20 18:55:25 +08:00
parent ad74efbc83
commit 716d151a78
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/routers/layout.vue
View file

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

19
src/components/layout/sider.vue
View file

@ -8,9 +8,11 @@
<div :class="childClasses"> <div :class="childClasses">
<slot></slot> <slot></slot>
</div> </div>
<div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}"> <slot name="trigger">
<i :class="triggerIconClasses"></i> <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
</div> <i :class="triggerIconClasses"></i>
</div>
</slot>
</div> </div>
</template> </template>
<script> <script>
@ -39,7 +41,6 @@
}, },
breakpoint: { breakpoint: {
type: String, type: String,
default: 'md',
validator (val) { validator (val) {
return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']); return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
} }
@ -145,11 +146,15 @@
this.isCollapsed = this.value; this.isCollapsed = this.value;
} }
} }
on(window, 'resize', this.onWindowResize); if (this.breakpoint !== undefined) {
this.matchMedia(); on(window, 'resize', this.onWindowResize);
this.matchMedia();
}
}, },
destroyed () { destroyed () {
off(window, 'resize', this.onWindowResize); if (this.breakpoint !== undefined) {
off(window, 'resize', this.onWindowResize);
}
} }
}; };
</script> </script>