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

add 'collapsible' props for sider

Browse source
This commit is contained in:
zhigang.li 2017-12-19 20:51:15 +08:00
parent 47ea7cc216
commit 1c26d05c31
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/layout.vue
View file

@ -4,6 +4,7 @@
<Sider <Sider
v-model="isCollapsed" v-model="isCollapsed"
collapsed-width="0" collapsed-width="0"
collapsible
ref="side" ref="side"
width="200"> width="200">
<Menu width="auto" theme="dark" active-name="1"> <Menu width="auto" theme="dark" active-name="1">

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

@ -8,7 +8,7 @@
<div :class="`${prefixCls}-children`"> <div :class="`${prefixCls}-children`">
<slot></slot> <slot></slot>
</div> </div>
<div v-show="!mediaMatched && !hideTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}"> <div v-show="showBottomTrigger" :class="triggerClasses" @click="toggleCollapse" :style="{width: siderWidth + 'px'}">
<i :class="triggerIconClasses"></i> <i :class="triggerIconClasses"></i>
</div> </div>
</div> </div>
@ -44,6 +44,10 @@
return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']); return oneOf(val, ['xs', 'sm', 'md', 'lg', 'xl']);
} }
}, },
collapsible: {
type: Boolean,
default: false
},
defaultCollapsed: { defaultCollapsed: {
type: Boolean, type: Boolean,
default: false default: false
@ -88,15 +92,18 @@
]; ];
}, },
siderWidth () { siderWidth () {
return this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width); return this.collapsible ? (this.isCollapsed ? (this.mediaMatched ? 0 : parseInt(this.collapsedWidth)) : parseInt(this.width)) : this.width;
}, },
showZeroTrigger () { showZeroTrigger () {
return this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger; return this.collapsible ? (this.mediaMatched && !this.hideTrigger || (parseInt(this.collapsedWidth) === 0) && this.isCollapsed && !this.hideTrigger) : false;
},
showBottomTrigger () {
return this.collapsible ? !this.mediaMatched && !this.hideTrigger : false;
} }
}, },
methods: { methods: {
toggleCollapse () { toggleCollapse () {
this.isCollapsed = !this.isCollapsed; this.isCollapsed = this.collapsible ? !this.isCollapsed : false;
this.$emit('input', !this.isCollapsed); this.$emit('input', !this.isCollapsed);
this.$emit('on-collapse', !this.isCollapsed); this.$emit('on-collapse', !this.isCollapsed);
}, },
@ -109,7 +116,7 @@
this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches; this.mediaMatched = matchMedia(`(max-width: ${dimensionMap[this.breakpoint]})`).matches;
if (this.mediaMatched !== mediaMatched) { if (this.mediaMatched !== mediaMatched) {
this.isCollapsed = this.mediaMatched; this.isCollapsed = this.collapsible ? this.mediaMatched : false;
this.$emit('input', this.mediaMatched); this.$emit('input', this.mediaMatched);
this.$emit('on-collapse', this.mediaMatched); this.$emit('on-collapse', this.mediaMatched);
} }