可以做淘宝联盟的免费网站,php怎么网站开发,开公司流程及费用,巫山做网站哪家强文章目录 前言一、封装头部导航栏二、使用步骤总结 前言
Vue 3 封装头部导航栏有助于提高代码复用性、统一风格、降低维护成本、提高可配置性和模块化程度#xff0c;同时还可以实现动态渲染等功能#xff0c;有利于项目开发和维护。 一、封装头部导航栏
封装头部导航栏同时还可以实现动态渲染等功能有利于项目开发和维护。 一、封装头部导航栏
封装头部导航栏使用Vuetify的应用栏(App bars)组件。 新建文件AppBar.vue 源码
templatev-app-bar absolutedensitycomfortable scroll-behaviorfade-image :elevation24roundedapp:collapsefalsefloatingv-container fluidv-tabs align-tabscenterv-tab首页/v-tabv-tab山花/v-tabv-tab关于我们/v-tab/v-tabs/v-containerv-btn iconv-iconmdi:mdi-magnify/v-icon/v-btn!-- 其它按钮 --v-btn iconv-iconmdi:mdi-heart/v-icon/v-btnv-btn iconv-iconmdi:mdi-account-circle/v-icon/v-btn/v-app-bar/templatescript langts setup nameAppBar
/script二、使用步骤
使用示例
templatev-appNavigation app/Navigationv-mainAppBar/AppBar RouterView/RouterView/v-main/v-app
/template
script langts
import Navigation from /components/navigation/Navigation.vue
import { RouterView } from vue-router;
/script注意我没有import封装好的AppBar组件就可以直接使用前文中有讲过自动引入。 效果 简易的菜单栏就封装好了以后关于导航栏的修改直接就可以更改封装的组件十分方便。
最后记录一下遇到的小问题昨天封装侧边导航栏时候发现图标异常十分巨大 原因是我默认使用fa字体改回默认mdi发现图标又不见了折腾一番把
aliases属性暂时注释解决了后面有时间再研究一下图标感觉这个混用图标还用的不够精通。
图标等配置备份 /*** plugins/vuetify.ts** Framework documentation: https://vuetifyjs.com*/// Styles
import mdi/font/css/materialdesignicons.css
import vuetify/styles
// import material-design-icons-iconfont/dist/material-design-icons.css // Ensure your project--Material 图标
// import fortawesome/fontawesome-free/css/all.css // Ensure your project is capable of handling css files// Composables
import { createVuetify } from vuetify
import { aliases, fa } from vuetify/iconsets/fa
import { mdi } from vuetify/iconsets/mdi
import { md } from vuetify/iconsets/md// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({//图标icons: {defaultSet: mdi||fa|| mdiSvg || md || fa4 || faSvg,//多个不生效,只生效fa// aliases,sets: {fa,mdi,md,},},// theme: {// defaultTheme: dark,// },
})总结
封装头部导航栏可以确保整个项目的导航栏风格一致提升用户体验让用户在使用过程中感到更加舒适和自然。就是大家都有咱们也得有。 行动是实现梦想的桥梁坚持是成功的密码。
