一、目标效果

效果图展示

实现原理

1.输入框聚焦时边框变色

使用CSS的:focus选择器，轻松实现元素聚焦时改变样式。

//用法示例
<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body><p>在文本框中点击，您会看到黄色的背景：</p><form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form><p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p></body>
</html>

2.输入框后面的提示字符的隐藏与展示

Vue的条件语句v-show可以根据条件选择展示或隐藏内容，我们直接在标签中写入v-show="ok"，通过控制ok的值从而决定元素的展示或隐藏，当ok:true时展示，当ok:false时隐藏。

//用法示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><h1 v-show="ok">Hello!</h1>
</div><script>
new Vue({el: '#app',data: {ok: true}
})
</script>
</body>
</html>

3.复选框为圆形，选中时样式改变

就一个选项，为什们要使用复选框呢，使用单选框不好吗？最开始我使用的是单选框，<input type="radio">,我发现选中后就不能取消选中了，而<input type="checkbox"则可以解决这个问题，可以任性的选中和取消选中。那么接下来要把选项框变成圆形，设置border-radius:50%;，选中时变色，设置.accept:checked {background: #fed100;}，注意accept只是我自定义的复选框元素类名。最后，还要实现选中时出现对勾的效果，我使用了伪类:after，通过在复选框accept后面添加一个背景色透明的元素，并给它设置左、下为黑色边框，右、上border:none;注意，这里我们要使用绝对定位，不然的话对勾就跑到复选框外面去了。

.accept:checked {background: #fed100;
}
.accept {width:20px;height:20px;background-color:#ffffff;border:solid 1px #dddddd;-webkit-border-radius:50%;border-radius:50%;font-size:5px;margin:0;padding:0;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-appearance:none;-webkit-user-select:none;user-select:none;-webkit-transition:background-color ease 0.1s;transition:background-color ease 0.1s;display: inline-block;
}
.accept:checked::after {content:'';top:5px;left:5px;position:absolute;background:transparent;border:black solid 2px;border-top:none;border-right:none;height:4px;width:8px;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);
}

4.vue的应用

我们的demo在哪里用到了Vue呢？Vue很大的一个优点在于节省代码，以前我们写四个输入框及前后的提示内容时，我们用的都是html中的li标签，要写5个li标签，不难但是麻烦。学了Vue的v-for循环语句之后，我们只需要写一个li标签<li v-for="site in sites"></li>，然后在Vue中定义一个sites数组，把li标签的内容储存在sites数组中，就可以快速实现同样的效果。除此之外，我们还想v-show="seen"中seen的值交给Vue控制，于是我们在数组sites中加入seen：false，这样输入框后面的提示字符默认隐藏的。最后我们通过给输入框input绑定@focus和@blur事件，切换seen的值。

二、源码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>log-in</title><link rel="stylesheet" href="/css/log-in.css"><script src="/js/vue.min.js"></script>
</head>
<body><div id="header"><div class="logo"><a href=""><img src="/img/logo.png" alt=""></a></div><div class="prompt"><p>已有美团账号？</p><button id="enter-btn">登录</button></div></div><div id="content"><form action=""><li v-for="site in sites"><p class="title">{{site.option}}</p><input type="text" id="phone-number" :class="site.style" @focus="show(site)" @blur="display(site)"><p class="remind" v-show="site.seen"><span class="iconfont">&#xe601;</span>{{site.tip}}</p></li><li><p class="title"></p><button class="res-btn">完成注册并登录</button></li><input type="checkbox" class="accept" style="margin-left: 80px;"><div class="tips">我已阅读并同意<span>《美团用户协议》《隐私政策》 </span>，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理 </div></form></div><div id="footer"><p>©meituan.com  京ICP证070791号  京公网安备11010502025545号</p></div><script>var register=new Vue({el:"#content",data:{sites:[{index:0,option:'手机号',seen:false,tip:"请输入您的手机号"},{index:1,option:'短信动态码',seen:false,tip:"请输入短信动态码"},{index:2,option:'创建密码',seen:false,tip:"请填写密码"},{index:3,option:'确认密码',seen:false,tip:"请再次输入密码"}],},methods:{show:function(s){s.seen=false;},display:function(s){s.seen=true;}}})</script>
</body>
</html>

CSS

@font-face {font-family: 'iconfont';  /* Project id 3155459 */src: url('//at.alicdn.com/t/font_3155459_m7m73vl1nap.woff2?t=1644581530904') format('woff2'),url('//at.alicdn.com/t/font_3155459_m7m73vl1nap.woff?t=1644581530904') format('woff'),url('//at.alicdn.com/t/font_3155459_m7m73vl1nap.ttf?t=1644581530904') format('truetype');}
.iconfont{font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}
/* 初始化 */
*{padding: 0;margin: 0;
}
a{text-decoration: none;cursor: pointer;color: black;
}
button{cursor: pointer;
}
li{list-style: none;
}/* body */
body{width: 100%;height: 570px;background-color: #ffffff;/* background-color: rosybrown; */
}/* header */
#header{width: 100%;height: 70px;box-sizing: border-box;padding: 0 150px;border-bottom: solid 2px #d8d8d8;/* background-color: greenyellow; */
}
#header .logo{width: 20%;height: 100%;box-sizing: border-box;padding: 10px 0;vertical-align: middle;float: left;/* background-color: white; */
}
#header .logo a{width: auto;height: 50px;display: block;/* background-color: yellow; */
}
#header .logo img{width: auto;height: 100%;/* background-color: violet; */
}
#header .prompt{width: 17%;height: 100%;float: right;font-size: 14px;color: #a2a2a2;box-sizing: border-box;padding-top: 23px;/* background-color: white; */
}
#header .prompt p{float: left;line-height: 24px;vertical-align: middle;
}
#header .prompt button{width: 44px;height: 24px;border: none;border-radius: 3px;font-size: 12px;float: right;background-color: #ffc200;
}/* content */
#content{clear: both;width: 100%;height: 460px;box-sizing: border-box;padding-left: 150px;padding-top: 40px;border-bottom: 1px solid #EEE;/* background-color: khaki; */
}
#content li{display: block;margin-bottom: 30px;font-size: 14px;
}
#content li .title{width: 80px;text-align: right;vertical-align: middle;display: inline-block;margin-right: 15px;/* background-color: rosybrown; */
}
.remind{min-width: 100px;display: inline-block;color: #666;font-size: 12px;
}
#content li input{width: 25%;height: 35px;border: 1px solid #aaa;box-sizing: border-box;padding: 0 10px;
}
#content li input:focus{outline: none;border: 1px solid #f76120;
}
.res-btn{width: 25%;height: 35px;font-size: 14px;font-weight: bold;border: none;border-radius: 3px;cursor: pointer;background-color: #ffd100;
}
.accept:checked {background: #fed100;
}
.accept {width:20px;height:20px;background-color:#ffffff;border:solid 1px #dddddd;-webkit-border-radius:50%;border-radius:50%;font-size:5px;margin:0;padding:0;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-appearance:none;-webkit-user-select:none;user-select:none;-webkit-transition:background-color ease 0.1s;transition:background-color ease 0.1s;display: inline-block;
}
.accept:checked::after {content:'';top:5px;left:5px;position:absolute;background:transparent;border:black solid 2px;border-top:none;border-right:none;height:4px;width:8px;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);
}
.tips{width: 355px;font-size: 14px;display: inline-block;color: rgba(0,0,0,.5);
}
.tips span{color: #FE8C00;
}
.iconfont{font-size: 16px;color: #ff8800;margin: 0 4px;
}
/* footer */
#footer{width: 100%;height: 40px;/* background-color: lightcoral; */
}
#footer p{font-size: 13px;color: #999;line-height: 40px;text-align: center;
}

三、动态效果展示

HTML+CSS+Vue美团注册页面效果图

Vue小demo—美团注册页面相关推荐

简单的vue小demo——小黑记事本
简单的vue小demo--小黑记事本整体效果:完整代码在这里一个简单的记事本,可实现简单的添加,删除,统计,清空,隐藏. 1.新增 1.1生成列表结果(v-for数组) 1.2获取用户输入(v-m ...
小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果——DOM
目录 1. 小兔鲜注册页面验证 2. 阶段案例(登录.首页页面)(重点) 3. 小兔鲜放大镜效果 1. 小兔鲜注册页面验证验证码模块有个小问题: 连续点击获取验证码会导致触发多次计时器,会导致计时出 ...
微信小程序登录注册页面代码
以下是一个简单的微信小程序注册登录页面的代码示例:  <view class="container"><form ...
用vue实现小米商城登录注册页面
vue课堂作业,记录下代码有些不规范,大多是html+css实现的,目前是静态页面的实现效果展示 html代码 <body><div id="app"> ...
微信小程序登录注册页面
// login.js // 获取应用实例 var app = getApp() var api = require("../../utils/api.js")Page({data ...
vue小demo易错点总结
1.在使用<transiton>添加过渡效果时,对应的标签需使用<router-link>,否则,transition不会达到应有的效果. 2.在路由文件里获取根实例时,需通过 ...
小程序登录/注册页面设计
界面设计页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局 github地址:https://github.com/youzan/zanui-weapp 实现 ...
【小程序】微信小程序登录/注册页面设计
界面设计页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局 github地址:https://github.com/youzan/zanui-weapp 实现 ...
一个vue小demo购物车
代码很简单,跟着慕课上的vue例子做的,有个问题记录下 this.$http.get("data/cartData.json").then(function(res){// _th ...

Vue小demo—美团注册页面

一、目标效果

效果图展示

实现原理

1.输入框聚焦时边框变色

2.输入框后面的提示字符的隐藏与展示

3.复选框为圆形，选中时样式改变

4.vue的应用

二、源码

HTML

CSS

三、动态效果展示

Vue小demo—美团注册页面相关推荐

最新文章

热门文章