1. 首頁 > 生活百科 > >

Mobile 我的Vue之旅、05 導航欄、登錄、注冊

生活百科

第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 構建手機底部導航欄、仿B站的登錄、注冊頁面 。
代碼倉庫alicepolice/Vue-05 (github.com)
構建項目新建項目

Mobile 我的Vue之旅、05 導航欄、登錄、注冊

文章插圖
導入bootstrap-icons-vuevue" rel="external nofollow noreferrer">bootstrap-icons-vue - npm (npmjs.com)
導入Tailwindvue-3-vite" rel="external nofollow noreferrer">在 Vue 3 和 Vite 安裝 Tailwind CSS - Tailwind CSS 中文文檔
安裝VSCODE插件
Mobile 我的Vue之旅、05 導航欄、登錄、注冊

文章插圖
構建目錄文件PS C:\Users\小能喵喵喵\Desktop\Vue\Homework\homework2\src> tree /fC:.│App.vue│index.css│main.ts│shims-vue.d.ts│├───assets│3.png│4.png│logo.png│├───components│BottomBar.vue│├───router│index.ts│├───store│index.ts│└───viewsAboutView.vueHomeLoginView.vueHomeView.vueLoginView.vueRegisterView.vue構建底部導航欄
Mobile 我的Vue之旅、05 導航欄、登錄、注冊

文章插圖
Router
  • redirect用于訪問網站根目錄的時候跳轉至特定哈希錨點對應的頁面
const routes: Array<RouteRecordRaw> = [{path: '/',name: '',redirect: () => {return { name: "home" }}},{path: '/home',name: 'home',component: HomeView},{path: '/login',name: 'login',component: LoginViewVue},{path: '/register',name: 'register',component: RegisterViewVue},{path: '/about',name: 'about',component: AboutViewVue}]App.vue使用 typescript 語法明確規定了setBottomFlag接收的布爾類型，同時嚴格規定 vue 應用實例 data 函數返回的對象中變量的類型 ， 即 as 語法 。
v-show="bottomFlag" 用于隱藏導航欄，setBottomFlag 由各個 router-view 負責 emit 觸發 。
<template><router-view @set-bottom-flag="setBottomFlag" /><BottomBar v-show="bottomFlag" :items="bottomItems" /></template><script lang="ts">import { defineComponent } from "vue";import BottomBar from "@/components/BottomBar.vue";type BottomItem = {text: string;icon: string;routerName: string;};export default defineComponent({name: "App",components: {BottomBar,},data() {return {bottomItems: [{ text: "首頁", icon: "b-icon-house-heart", routerName: "home" },{ text: "理財", icon: "b-icon-coin", routerName: "about" },{ text: "消息", icon: "b-icon-chat-dots", routerName: "about" },{ text: "我的", icon: "b-icon-person-circle", routerName: "about" },] as BottomItem[],bottomFlag: true as boolean,};},methods: {setBottomFlag(value: boolean): void {this.bottomFlag = value;},},});</script>BottomBar.vue這里使用了 windtail css 功能性類語法，具體信息可以通過官方文檔查到 。
在vue3.1中 ， router-link的tag已經被廢除，需要使用插槽的方式 。給 router-link 添加 custom v-slot="{ navigate }" 。那么會在 router-link 這個樹節點中的子節點搜索綁定了 navigate 方法的事件，并用該子節點標簽替換當前 router-link 標簽 。
custom -> <router-link> 是否不應將其內容包裝在 <a> 標記中 。
icon的生成使用了動態控件,依賴外部傳進去的數組 ->:is
// 來自 App.vue 的數組傳遞給了當前的 props -> itemsbottomItems: [{ text: "首頁", icon: "b-icon-house-heart", routerName: "home" },{ text: "理財", icon: "b-icon-coin", routerName: "about" },{ text: "消息", icon: "b-icon-chat-dots", routerName: "about" },{ text: "我的", icon: "b-icon-person-circle", routerName: "about" },] as BottomItem[],<template><divclass="box-borderh-16absolutecontainerbg-blue-200bottom-0left-0flex flex-nowrapitems-center"><div v-for="(item, index) in items" :key="index" style="width: 100%"><router-link :to="{ name: item.routerName }" custom v-slot="{ navigate }"><div @click="navigate" class="text-center"><div class="pt-2"><component :is="item.icon" class="m-auto text-2xl" /><div class="text-lg">{{ item.text }}</div></div></div></router-link></div></div></template><script lang="ts">export default {props: {items: Array,},};</script>修改HomeView.vue在Home頁面下默認顯示底部導航欄，在掛載的時候通知父組件事件 。
this.$emit("set-bottom-flag", true);<template><div class="text-6xl">主頁面 HELLO WORLD</div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({name: "HomeView",components: {},mounted() {this.$emit("set-bottom-flag", true);},});</script>構建登錄、注冊
Mobile 我的Vue之旅、05 導航欄、登錄、注冊

推薦閱讀