经验总结

  1. 首页 > 生活 > >

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

生活百科

RegisterView.vue部分功能与 Login.view 类似 。
表单填入更改标签颜色当输入手机号时，获取验证码会由灰变成粉色 。将字体颜色从固定的class抽取出放入动态class绑定计算属性 。每当phone发生变化即可改变颜色 。
<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">我已阅读并同意<ahref="https://www.huyubaike.com/biancheng/#"class="text-blue-600 dark:text-blue-500 hover:underline">用户协议</a>和<ahref="https://www.huyubaike.com/biancheng/#"class="text-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">遇到问题?<ahref="https://www.huyubaike.com/biancheng/#"class="text-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'

经验总结扩展阅读


上一篇：喷雾和爽肤水的区别

下一篇：2023年10月22日出去玩好不好 2023年10月22日是出去玩的黄道吉日吗