利用vue 实现一个响应式导航

效果图：

实现起来很简单，下面主要代码

  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 {
transform: translateY(-100%);

完整代码（还可以修改优化一下）：

<template><div class="Topnav"><div class="Topnav_item" style="background:#1286fd"><div class="Topnav_img_box"><router-link to="/"><!-- logo --><img src="@/assets/images/logo.png" alt />  </router-link></div><!-- pc端导航 --><div class="flex_box mymakeinfo" v-show="fullWidth"><div>首页</div><div>店铺装修</div><div>账户信息</div><div>模板管理</div><div>我的消息</div><div> <a target="_blank" href="">我的站点</a></div><div>新手入门</div><div>安全退出</div></div><!-- 导航图标 --><div class="H5_item" v-show="!fullWidth">  <svg-icon icon-class="list" @click="make_menu" class-name="H5-menu" /></div></div><!-- 移动端导航 --><transition name="toggle-cart"><div class="H5-menu-item" style='background:#1286fd' v-show="!fullWidth&&!dismenu"><div>首页</div><div>店铺装修</div><div>账户信息</div><div>模板管理</div><div>我的消息</div><div> <a target="_blank" href="">我的站点</a></div><div>新手入门</div><div>安全退出</div></div></transition><div style="height:75px"></div></div>
</template><script>
export default {name: "Topnav",data() {return {pagetype: "index",fullWidth: true,dismenu: true};},methods: {make_menu() { //点击导航图标this.dismenu = !this.dismenu;},page_width() {//获取屏幕宽度let screenWidth = window.screen.width;console.log(screenWidth);if (screenWidth < 800) {this.fullWidth = false;} else {this.fullWidth = true;}}},computed: {},mounted() {window.onresize = () => {//监听屏幕变化this.page_width();};this.page_width();},created(){}
};
</script><style lang="scss">
.Topnav_img_box {width: 12rem;display: flex;align-items: center;justify-content: center;img{width: 100%;margin-left: 40px;}
}
.Topnav_nav_box {width: 560px;padding: 0 60px;justify-content: space-between;
}
.this_tnbd_div {background-color: rgba(0, 0, 0, 0.3);
}
.Topnav_nav_box div {padding: 0 21px;height: 36px;font-size: 14px;line-height: 36px;border-radius: 18px;
}.Topnav .Topnav_item {position: fixed;display: flex;top: 0;z-index: 1999;left: 0;height: 74px;color: #fff;width: 100%;.H5_item {position: absolute;right: 14px;top: 24px;.H5-menu {font-size: 22px;}}
}
.H5-menu-item {color: #fff;width: 120px;position: fixed;z-index: 20190705;right: 0px;top: 75px;div {height: 42px;line-height: 42px;text-align: center;}
}
.mymakeinfo {position: absolute;right: 30px;top: 0;justify-content: space-around;font-size: 14px;height: 74px;
}
.mymakeinfo div {height: 36px;line-height: 36px;border-radius: 17px;padding: 0 20px;
}
.flex_box {display: flex;align-items: center;
}
.toggle-cart-enter-active,
.toggle-cart-leave-active {transition: all 0.4s ease-out;
}
.toggle-cart-enter,
.toggle-cart-leave-active {transform: translateY(-100%);
}
</style>

利用vue 实现一个响应式导航相关推荐

【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
Java程序员的日常 —— 响应式导航Demo
这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果代码 <!DOCTYPE html> <html> &l ...
html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
深入剖析Vue源码 - 响应式系统构建(上)
从这一小节开始,正式进入Vue源码的核心,也是难点之一,响应式系统的构建.这一节将作为分析响应式构建过程源码的入门,主要分为两大块,第一块是针对响应式数据props,methods,data,comp ...
【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue 3.0 响应式系统原理基础回顾 Vue.js 响应式回顾 Proxy 对象实现属性监听多层属 ...
响应式导航_检查响应式导航模式
响应式导航随着网页设计师创建越来越多的响应式网站,我们处理全球导航的方式不断出现. 这是专注于如何开发其中一些模式的系列文章中的第一篇. 这篇文章将涵盖三种响应式导航模式: 顶部导航,优先级和选择 ...
详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

利用vue 实现一个响应式导航

利用vue 实现一个响应式导航相关推荐

最新文章

热门文章