1. 首頁 > 生活百科 > >

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

生活百科


<divclass="login-register-input w-2/6 text-center":class="changeGetCodeColor">獲取驗證碼</div>computed: {changeGetCodeColor(): string {if (this.phone == "") {return "text-gray-400";} else {return "text-pink-400";}},},完整代碼<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: 'login' }" 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><select id="countries" class="login-register-input w-full border-y"><option selected value="https://www.huyubaike.com/biancheng/CN">中國大陸</option><option value="https://www.huyubaike.com/biancheng/US">美國</option><option value="https://www.huyubaike.com/biancheng/CA">加拿大</option><option value="https://www.huyubaike.com/biancheng/FR">法國</option><option value="https://www.huyubaike.com/biancheng/DE">德國</option></select></div><div class="border-b"><div class="login-register-input w-1/6">+86</div><inputid="phone"class="login-register-input w-3/6"type="text"placeholder="請輸入手機號碼"v-model="phone"/><divclass="login-register-input w-2/6 text-center":class="changeGetCodeColor">獲取驗證碼</div></div><div class="border-b"><div class="login-register-input w-1/6">驗證碼</div><inputid="code"class="login-register-input w-5/6"type="text"placeholder="請輸入驗證碼"@focusin="changeIMG('4.png')"@focusout="changeIMG('3.png')"/></div><div class="text-center pt-6"><button type="button" class="login-register-solid-button w-11/12">驗證登錄</button></div><div class="text-center pt-4"><div class="flex items-center align-top"><inputid="link-checkbox"type="checkbox"value=""class="login-register-checkbox"/><labelfor="link-checkbox"class="ml-2text-smfont-mediumtext-gray-500dark:text-gray-300text-left">我已閱讀并同意<atext-blue-600 dark:text-blue-500 hover:underline">用戶協議</a>和<atext-blue-600 dark:text-blue-500 hover:underline">隱私政策</a>，未注冊綁定的手機號驗證成功后將自動注冊</label></div></div><div class="text-center pt-6"><labelclass="ml-2text-smfont-mediumtext-gray-500dark:text-gray-300text-left">遇到問題?<atext-blue-600 dark:text-blue-500 hover:underline">查看幫助</a></label></div></div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({name: "RegisterView",components: {},data() {return {banner: require("../assets/3.png"),phone: "",};},methods: {changeIMG(src: string): void {this.banner = require(`../assets/${src}`);},},computed: {changeGetCodeColor(): string {if (this.phone == "") {return "text-gray-400";} else {return "text-pink-400";}},},mounted() {this.$emit("set-bottom-flag", false);},});</script>一些零散的知識補充Module not found: Error: Can't resolve 'sass-loader'

Module not found: Error: Can't resolve 'sass-loader'
解決方法： 運行如下命令后重新啟動服務
npm install sass-loader -Dnpm install node-sass -D聲明式、命令式命令式UI：構建全功能UI實體，然后在UI更改時使用方法對其進行變更 。
聲明式UI：描述當前的UI狀態 ， 并且不需要關心它是如何過渡到框架的 。
TS、ECMA、JS 關系
Mobile 我的Vue之旅、05 導航欄、登錄、注冊

文章插圖
配置NPM鏡像npm config set registry=http://registry.npm.taobao.org初試TSvar hello = "hello world"console.log(hello)npm install -g typescripttsc helloworld ::編譯tsnode helloworld ::運行js變量提升當使用var聲明一個變量的時候，該變量會被提升到作用域的頂端 ， 但是賦值的部分并不會被提升 。
console.log(hello)var hello = "hello world"而let、const不會 ， 實際開發中建議盡量使用用 let 和 const 代替var 。
好用的網站Tailwind CSS Select / Listbox Form - Free Examples (tailwind-elements.com)
Tailwind CSS Flowbite

推薦閱讀