文章插图
提取组件对于按钮和表单元素之类的小型组件,与简单的 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发生变化即可改变颜色 。
推荐阅读
- Vue实现拖拽穿梭框功能四种方式
- 我的 Kafka 旅程 - Consumer
- 我的父亲作文600字初中作文 关于我的父亲写人作文600字
- 我的老父亲优秀学生作文5篇
- 我的父亲作文600字初中优秀作文 我的父亲初二优秀作文600字范文
- 我的父亲600字优秀作文初中 描写我的父亲初中600字作文
- 我的世界手机版紫珀台阶怎么获得
- 关于朋友圈的句子短句子 发朋友圈的句子短句子
- 主播感谢守护的句子 感谢守护我的句子
- qq查看特别关心我的人数 qq查看特别关心我的人