1. 首頁 > 生活百科 > >

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

生活百科


文章插圖
提取組件對于按鈕和表單元素之類的小型組件，與簡單的 CSS 類相比，創建模板片斷或 JavaScript 組件通常會感覺過重 。
官方建議使用 @layer components { ... } 指令包裝自定義組件樣式 ， 以告訴 Tailwind 這些樣式屬于哪一層 。
在 src/index.css 中定義表單標簽、按鈕標簽共用的 Tailwind CSS 樣式集合
/* ./src/index.css */@tailwind base;@tailwind components;@tailwind utilities;@layer components {.login-register-input {@apply inline-block bg-white focus:outline-none py-3 pl-3 appearance-none leading-normal;}.login-register-solid-button{@applyfocus:outline-nonetext-whitebg-pink-400font-mediumrounded-smtext-lgpx-5py-2.5mb-2}.login-register-hollow-button{@applyfocus:outline-nonetext-pink-400border-pink-400 borderfont-mediumrounded-smtext-lgpx-5py-2.5mb-2}.login-register-checkbox{@applyml-2text-smfont-mediumtext-gray-500dark:text-gray-300text-left}}LoginView.vuerouter-link注意 router-link 的用法，這里分別綁定了左箭頭、短信登錄 。主要靠如下語法 。
custom v-slot="{ navigate }// 上: router-link標簽中的屬性, 下: 綁定實現像a標簽那樣具備跳轉功能的標簽 @click="navigate"動態綁定背景圖片方式require 從依賴項返回導出 。是同步過程，不會觸發對服務器的請求 。編譯器會確保依賴項可用 。
<divclass="bg-cover bg-center h-24 shadow-inner":style="{'background-image': 'url(' + banner + ')',}"></div>data() {return {banner: require("../assets/3.png"),};}更多資料可參考
vue-cli" rel="external nofollow noreferrer">https://stackoverflow.com/questions/67193179/how-can-i-link-background-image-vue-cli
vue-js-data-bind-style-backgroundimage-not-working" rel="external nofollow noreferrer">https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working
輸入密碼的時候切換背景依托兩個事件，通過當前光標對表單標簽的進出實現 。
@focusin="changeIMG('4.png')"@focusout="changeIMG('3.png')"methods: {changeIMG(src: string): void {this.banner = require(`../assets/${src}`);},},完整代碼<template><div class="container bg-gray-100 absolute inset-0"><div class="box-border bg-white border-b-1 border-b-black h-16 p-2"><router-link :to="{ name: 'home' }" custom v-slot="{ navigate }"><b-icon-arrow-left-shortclass="inline-block text-4xl align-middle mr-3 mt-2"@click="navigate"/></router-link><span class="text-xl absolute top-5">密碼登錄</span><router-link :to="{ name: 'register' }" custom v-slot="{ navigate }"><spanclass="text-lg absolute right-4 top-5 text-gray-500"@click="navigate">短信登錄</span></router-link></div><divclass="bg-cover bg-center h-24 shadow-inner":style="{'background-image': 'url(' + banner + ')',}"></div><div class="border-y"><div class="login-register-input w-1/6">賬號</div><inputid="username"class="login-register-input w-5/6"type="text"placeholder="請輸入手機號或郵箱"/></div><div class="border-b"><div class="login-register-input w-1/6">密碼</div><inputid="password"class="login-register-input w-3/6"type="text"placeholder="請輸入密碼"@focusin="changeIMG('4.png')"@focusout="changeIMG('3.png')"/><div class="login-register-input pl-8 w-2/6 text-pink-400 text-center">忘記密碼?</div></div><div class="text-center pt-6 flex justify-around"><button type="button" class="login-register-hollow-button w-5/12">注冊</button><button type="button" class="login-register-solid-button w-5/12">登錄</button></div><div class="text-center pt-4"><div class="flex items-center align-top"><inputid="link-checkbox"type="checkbox"value=""class="ml-4 w-5 h-5 bg-gray-100 rounded"/><labelfor="link-checkbox"class="ml-2 text-sm font-medium text-gray-500 text-left">我已閱讀并同意<a class="text-blue-600">用戶協議</a>和<a>隱私政策</a></label></div></div><div class="text-center pt-6"><label class="login-register-checkbox">遇到問題?<a class="text-blue-600">查看幫助</a></label></div></div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({name: "LoginView",components: {},data() {return {banner: require("../assets/3.png"),};},methods: {changeIMG(src: string): void {this.banner = require(`../assets/${src}`);},},mounted() {this.$emit("set-bottom-flag", false);},});</script>RegisterView.vue部分功能與 Login.view 類似 。
表單填入更改標簽顏色當輸入手機號時，獲取驗證碼會由灰變成粉色 。將字體顏色從固定的class抽取出放入動態class綁定計算屬性 。每當phone發生變化即可改變顏色 。

推薦閱讀