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

Merge pull request #2668 from lison16/layout

Browse source 
update Layout
This commit is contained in:
Aresn 2017-12-21 10:00:38 +08:00 • committed by GitHub
commit baa75b0aef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 11 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
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>

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

@ -8,9 +8,11 @@
<div :class="childClasses">
<slot></slot>
</div>
<div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<i :class="triggerIconClasses"></i>
</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('on-collapse', !this.isCollapsed);
this.$emit('input', 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 () {
off(window, 'resize', this.onWindowResize);
beforeDestroy () {
if (this.breakpoint !== undefined) {
off(window, 'resize', this.onWindowResize);
}
}
};
</script>