初学前端学习过程中参与工程实现的简单功能 逻辑不成熟 仅起记录作用
html代码
将要显示隐藏的主体部分绑定和隐藏按钮一样的v-show=“isShow”
<button class="shrink" @click="navLeftHidden" v-show="isShow">
<img src="@/assets/img/shrink.png" alt=""> // 与主体部分一起显示的显示按钮
</button>
<button class="eject" @click="navLeftHidden" v-show="!isShow">
<img src="@/assets/img/eject.png" alt=""> // 隐藏按钮
</button>
script代码
export default {
data () {
return {
isShow:true // 默认显示
}
},
navLeftHidden () {
// 隐藏
this.isShow= !this.isShow
}
},
CSS代码： // 实现定位改变位置
.shrink{
position:absolute; /*定位 将按钮放在指定的位置*/
top:50%;
left:100px;
z-index:111; /*将按钮移到最上层 不被其他部分遮挡 数字越大越在上面*/
}
.eject{
position:absolute;
top:50%;
z-index:111;
}
样式：
