html代码
将要显示隐藏的主体部分绑定 v-show="navShow"
<button class="shrink" @click="navLeftHidden" v-show="navShow">
<img src="@/assets/img/shrink.png" alt=""> // 与主体部分一起显示的显示按钮
<button class="eject" @click="navLeftHidden" v-show="!navShow">
<img src="@/assets/img/eject.png" alt=""> // 隐藏按钮
</button>
script代码
export default {
data () {
return {
navShow:true // 默认显示
}
},
/* methods: { // 点击事件
handleSelect (e, navDataItem) {
this.$emit('changeActiveIndex', navDataItem)
},*/
navLeftHidden () {
// 隐藏左侧导航栏
this.navShow = !this.navShow
}
},
CSS代码： // 实现定位改变位置
.shrink{
position:absolute; /*定位 将按钮放在指定的位置*/
top:50%;
left:200px;
z-index:111; /*将按钮移到最上层 不被其他部分遮挡 数字越大越在上面*/
}
.eject{
position:absolute;
top:50%;
z-index:111;
}
样式：
