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 href="https://www.huyubaike.com/biancheng/#" class="text-blue-600">用户协议</a>和<ahref="https://www.huyubaike.com/biancheng/#"class="text-blue-600">隐私政策</a></label></div></div><div class="text-center pt-6"><label class="login-register-checkbox">遇到问题?<a href="https://www.huyubaike.com/biancheng/#" 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发生变化即可改变颜色。

Mobile 我的Vue之旅、05 导航栏、登录、注册( 二 )

推荐阅读

忙碌了多少天辛苦了多少年是啥歌快去听一下吧

商业承兑汇票是什么意思商业承兑汇票的理解

梦见水里有黑鱼在游

喝番茄汁有什么好处番茄汁的好处有哪些

如何通过女人面相看婚姻哪些面相的女人婚姻好

“八岐之术”是什么？

关于洛阳昊远机械设备有限公司简述洛阳昊远机械设备有限公司

孕妇梦见和别人吵架孕妇梦见别人挣了很多钱

一斤几克重，一斤等于多少千克

煤炭公司起名大全免费煤炭行业起名大全

皮蛋是生的还是熟的怎么判断皮蛋是生的还是熟的

五岳奇险天下第一山是哪座山天下第一山是哪座山

节日由来英语节日由来

在“再见阿郎”中的刘金虎怎么又是金鹏？

瑜伽入门动作图解瑜伽入门动作图解上

我们好像在哪见过歌词我们好像在哪见过歌词歌谱

etc不抬杆可以倒回吗 etc不抬杆可以倒回会被扣分吗

梦见和当官的同学在一起商人梦见当官的同学

教你如何使用迅雷离线下载[新发布]

天麻能泡白酒吗天麻可以和虫草花一起煲汤吗