初學前端學習過程中參與工程實作的簡單功能 邏輯不成熟 僅起記錄作用
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;
}
樣式：
