效果图:
实现起来很简单,下面主要代码
page_width() {
let screenWidth = window.screen.width;
console.log(screenWidth);
if (screenWidth < 800) {
this.fullWidth = false;
} else {
this.fullWidth = true;
}
}
mounted() {
window.onresize = () => {
this.page_width();
};
this.page_width();
}
然后在html判断一下
<div v-if="fullWidth">pc导航</div>
<transition name="toggle-cart">
<div v-if="!fullWidth">移动导航导航</div>
</template>
vue的动画样式
``
.toggle-cart-enter-active,
.toggle-cart-leave-active {
transition: all 0.4s ease-out;
}
.toggle-cart-enter,
.toggle-cart-leave-active {