Skip to content

V
VueJS_04

小辉懂编程 / VueJS_04
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS_04
提交 4a3d7a1b 编写于 作者: 6 6437a2bc3c05b0675a61786b
浏览文件
操作

Tue Jun 13 02:11:00 UTC 2023 inscode

上级 18e2dc94
隐藏空白更改
内联 并排
Showing with 374 addition and 260 deletion
src/components/test.vue
浏览文件 @ 4a3d7a1b
<template> <!-- html代码 -->
<div> <!-- 背景云层 -->
<!-- 背景云层 --> <div id="header">
<div id="header"> <div id="clouds">
<div id="clouds">
<div class="cloud-1" data-speed="35000"></div> <div class="cloud-1" data-speed="35000"></div>
<div class="cloud-2" data-speed="45000" data-delay="15000"></div> <div class="cloud-2" data-speed="45000" data-delay="15000"></div>
<div class="cloud-3" data-speed="40000"></div> <div class="cloud-3" data-speed="40000"></div>
<div class="cloud-4" data-speed="38000" data-delay="20000"></div> <div class="cloud-4" data-speed="38000" data-delay="20000"></div>
</div> </div>
</div><!-- / #header --> </div><!-- / #header -->
<div id="content"> <div id="content">
<div class="container"> <div class="container">
<!-- 登录模块 --> <!-- 登录模块 -->
<form id="login-form" @submit.prevent="login"> <form id="login" method="post" action="login.jsp" onsubmit="return checkForm(this);">
<div id="login_header"><i class="icon-home"></i>智能小区服务管理系统</div> <div id="login_header"><i class="icon-home"></i>智能小区服务管理系统</div>
<div id="login_content"> <div id="login_content">
<div class="form-group"> <span>
<input v-model="username" type="text" maxlength="18" placeholder="用户名" @click="showTooltip('填写您的身份证号')" @blur="hideTooltip"> <input class="tip" name="username" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
<div class="tooltip" :style="{display: showUsernameTooltip ? 'block' : 'none'}">{{ usernameTooltip }}</div> <label for="username">用户名</label>
</div> <i class="icon-user"></i>
<div class="tooltip" data-text="填写您的身份证号">填写您的身份证号</div>
<div class="form-group"> </span>
<input v-model="password" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写您的密码')" @blur="hideTooltip"> <span>
<div class="tooltip" :style="{display: showPasswordTooltip ? 'block' : 'none'}">{{ passwordTooltip }}</div> <input class="tip" name="password" type="password" maxlength="16" onclick="onClick(this);" onblur="onBlur(this);">
</div> <label for="password">密码</label>
<i class="icon-lock"></i>
<div class="form-group"> <div class="tooltip" data-text="填写您的密码">填写您的密码</div>
<div class="option" @click="toggleOptionList"> </span>
<div class="option_result">{{ userType }}</div> <div class="option">
<div class="option_arrow" :class="{ active: showOptionList }"><b class="arrow"></b></div> <div class="option_result">用户类型</div>
<ul class="option_list" :style="{display: showOptionList ? 'block' : 'none'}"> <div class="option_arrow"><b class="arrow"></b></div>
<li @click="selectUserType('住户')">住户</li> <ul class="option_list">
<li @click="selectUserType('管理员')">管理员</li> <li>住户</li>
<li @click="selectUserType('运营商')">运营商</li> <li>管理员</li>
</ul> <li>运营商</li>
</div> </ul>
<div class="tooltip" :style="{display: showTypeTooltip ? 'block' : 'none'}">{{ typeTooltip }}</div> <div class="tooltip" data-text="选择您的用户类型">选择您的用户类型</div>
</div> </div><!-- / .option -->
</div><!-- / #login_content --> </div><!-- / #login_content -->
<div id="login_footer"> <div id="login_footer">
<button id="login_btn" type="submit">{{ loginButtonContent }}</button> <div class="ing"></div>
</div><!-- / #login_footer --> <button id="login_btn" type="submit">登录</button>
</div><!-- / #login_footer -->
<div><a @click.prevent="showRegisterForm">新用户注册</a></div>
</form><!-- / #login-form --> <div><a id="register_link" href="javascript:void(0);">新用户注册</a></div>
</form><!-- / #login -->
<!-- 注册模块 --> <!-- 注册模块 -->
<form id="register-form" @submit.prevent="register" style="display: none;"> <form id="register" method="post" action="register.jsp" onsubmit="return checkForm(this);">
<div id="register_header"><i class="icon-home"></i>新用户注册</div> <div id="register_header"><i class="icon-home"></i>新用户注册</div>
<div id="register_content"> <div id="register_content">
<div class="form-group"> <span>
<input v-model="realname" type="text" maxlength="4" placeholder="真实姓名" @click="showTooltip('填写您的真实中文姓名')" @blur="hideTooltip"> <input class="tip" name="realname" type="text" maxlength="4" onclick="onClick(this);" onblur="onBlur(this);">
<div class="tooltip" :style="{display: showRealnameTooltip ? 'block' : 'none'}">{{ realnameTooltip }}</div> <label for="realname">真实姓名</label>
</div> <i class="icon-user"></i>
<div class="tooltip" data-text="填写您的真实中文姓名">填写您的真实中文姓名</div>
<div class="form-group"> </span>
<input v-model="id" type="text" maxlength="18" placeholder="身份证号" @click="showTooltip('填写您的真实身份证号码')" @blur="hideTooltip"> <span>
<div class="tooltip" :style="{display: showIdTooltip ? 'block' : 'none'}">{{ idTooltip }}</div> <input class="tip" name="ID" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
</div> <label for="ID">身份证号</label>
<i class="icon-lock"></i>
<div class="form-group"> <div class="tooltip" data-text="填写您的真实身份证号码">填写您的真实身份证号码</div>
<input v-model="registerPassword" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写6~16个字母或者数字')" @blur="hideTooltip"> </span>
<div class="tooltip" :style="{display: showRegisterPasswordTooltip ? 'block' : 'none'}">{{ registerPasswordTooltip }}</div> <span>
</div> <input class="tip" name="password" maxlength="16" type="password" onclick="onClick(this);" onblur="onBlur(this);">
</div><!-- / #register_content --> <label for="password">密码</label>
<i class="icon-lock"></i>
<div id="register_footer"> <div class="tooltip" data-text="填写6~16个字母或者数字">填写6~16位字母或者数字</div>
<button id="register_btn" type="submit">{{ registerButtonContent }}</button> </span>
</div><!-- / #register_footer --> </div><!-- / #register_content -->
<div><a @click.prevent="showLoginForm">返回登录</a></div> <div id="register_footer">
</form><!-- / #register-form --> <div class="ing"></div>
</div><!-- / .container --> <button id="register_btn" type="submit">注册</button>
</div><!-- / #content--> </div><!-- / #register_footer -->
<div id="footer"> <div><a id="login_link" href="javascript:void(0);">返回登录</a></div>
<div class="container"></div><!-- / .container --> </form><!-- / #register -->
</div><!-- / #footer -->
</div> </div><!-- / .container -->
</template> </div><!-- / #content-->
<script> <div id="footer">
export default {
data() { <div class="container">
return {
username: '', </div><!-- / .container -->
password: '',
userType: '用户类型', </div><!-- / #footer -->
showOptionList: false, css代码
realname: '', /* #Reset & Basics (Inspired by E. Meyers)
id: '', ================================================== */
registerPassword: '', html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
showUsernameTooltip: false, margin: 0;
showPasswordTooltip: false, padding: 0;
showTypeTooltip: false, border: 0;
showRealnameTooltip: false, font-size: 100%;
showIdTooltip: false, font: inherit;
showRegisterPasswordTooltip: false, vertical-align: baseline; }
usernameTooltip: '', article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
passwordTooltip: '', display: block; }
typeTooltip: '', body {
realnameTooltip: '', line-height: 1; }
idTooltip: '', ol, ul {
registerPasswordTooltip: '', list-style: none; }
loginButtonContent: '登录', blockquote, q {
registerButtonContent: '注册', quotes: none; }
}; blockquote:before, blockquote:after,
}, q:before, q:after {
methods: { content: '';
toggleOptionList() { content: none; }
this.showOptionList = !this.showOptionList; table {
this.showTypeTooltip = false; /*border-collapse: collapse;*/
}, border-spacing: 0; }
selectUserType(type) {
this.userType = type; /* #Basic Styles
this.showOptionList = false; ================================================== */
}, body {
showTooltip(text) { background:#87CEFA;
const label = event.target.placeholder; overflow:hidden;
if (label === '用户名') { font:normal 16px/1.5 Helvetica, "Microsoft Yahei", Arial, sans-serif;
this.showUsernameTooltip = true; color:#444;
this.usernameTooltip = text; -webkit-font-smoothing:antialiased; /* Fix for webkit rendering */
} else if (label === '密码') { -webkit-text-size-adjust:100%;
this.showPasswordTooltip = true; }
this.passwordTooltip = text; input {padding:10px 15px;outline:0;border:0;border-radius:3px;width:200px;}
} else if (label === '真实姓名') { a, a:visited { color: #333; text-decoration: none; outline: 0; }
this.showRealnameTooltip = true; a:hover, a:focus { color: #000;}
this.realnameTooltip = text;
} else if (label === '身份证号') { /*云层*/
this.showIdTooltip = true; #clouds{position:absolute;top:0;right:0;bottom:0;left:0;}
this.idTooltip = text; [class^="cloud-"]{position:absolute;right:120%;width:200px;height:60px;background:white;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}
} else if (label === '密码') { [class^="cloud-"]:before,[class^="cloud-"]:after{content:'';position:absolute;top:-15px;left:10px;width:100px;height:80px;background:#fff;-webkit-border-radius:100px;border-radius:100px;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);}
this.showRegisterPasswordTooltip = true; [class^="cloud-"]:after {top: -55px;left: auto;right: 15px;width: 120px;height: 120px;}
this.registerPasswordTooltip = text; .cloud-1 {top: 50px;-webkit-animation: moveclouds 30s linear infinite;-moz-animation: moveclouds 30s linear infinite;-o-animation: moveclouds 30s linear infinite;animation: moveclouds 30s linear infinite;}
} else { .cloud-2 {top: 100px;opacity: 0.8;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);-webkit-animation: moveclouds 45s linear infinite;-moz-animation: moveclouds 45s linear infinite;-o-animation: moveclouds 45s linear infinite;animation: moveclouds 45s linear infinite;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;animation-delay: 5s;}
this.showTypeTooltip = true; .cloud-3 {top: 150px;opacity: 0.6;-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);-webkit-animation: moveclouds 40s linear infinite;-moz-animation: moveclouds 40s linear infinite;-o-animation: moveclouds 40s linear infinite;animation: moveclouds 40s linear infinite;}
this.typeTooltip = text; .cloud-4 {top: 200px;opacity: 0.75;-webkit-transform: scale(0.75);-moz-transform: scale(0.75);transform: scale(0.75);-webkit-animation: moveclouds 26s linear infinite;-moz-animation: moveclouds 26s linear infinite;-o-animation: moveclouds 26s linear infinite;animation: moveclouds 26s linear infinite;-webkit-animation-delay: 8s;-moz-animation-delay: 8s;animation-delay: 8s;}
} /*云层移动*/
}, @-webkit-keyframes moveclouds {
hideTooltip() { 0% { right: -20%; }
const label = event.target.placeholder; 100% { right: 120%; }
if (label === '用户名') { }
this.showUsernameTooltip = false; @-moz-keyframes moveclouds {
} else if (label === '密码') { 0% { right: -20%; }
this.showPasswordTooltip = false; 100% { right: 120%; }
} else if (label === '真实姓名') { }
this.showRealnameTooltip = false; @-o-keyframes moveclouds {
} else if (label === '身份证号') { 0% { right: -20%; }
this.showIdTooltip = false; 100% { right: 120%; }
} else if (label === '密码') { }
this.showRegisterPasswordTooltip = false;
} else {
this.showTypeTooltip = false; /* #Content Styles
} ================================================== */
}, /*内容*/
showRegisterForm() { #content{width:100%;}
this.$refs.loginForm.style.display = 'none'; .container{width:960px;margin:0 auto;text-align:center;}
this.$refs.registerForm.style.display = 'block'; /*登录/注册*/
}, #login,#register{width:400px;height:380px;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;background:#F8F8F8;border-radius:10px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.5);}
showLoginForm() { #register{left:120%;}
this.$refs.loginForm.style.display = 'block'; #login_header,#register_header{height:60px;line-height:60px;font-size:20px;font-weight:bold;color:#77CA60;background:#FFF;border-radius:10px 10px 0 0;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .1);box-shadow:0 1px 3px rgba(0, 0, 0, .1);}
this.$refs.registerForm.style.display = 'none'; .icon-home{font-size:30px;position:relative;top:3px;}
},
login() { #login_content,#register_content{height:200px;padding:30px 20px;}
this.loginButtonContent = '登录中...'; input{width:300px;padding:14px 15px;background:#F0F0F0;font:normal 16px/1.5 Helvetica,"Microsoft Yahei",Arial,sans-serif;color:#444;}
setTimeout(() => { span{position:relative;display:inline-block;height:50px;margin-bottom:30px;}
this.loginButtonContent = '登录'; .tip{text-indent:80px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
}, 5000); .tip:focus,.tip:active{text-indent:0;}
}, .tip + label{position:absolute;top:16px;left:15px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
register() { .tip:focus + label,.tip:active + label{-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);transform:translateY(-40px);}
this.registerButtonContent = '注册中...'; .icon-user,.icon-lock{position:absolute;top:16px;right:14px;color:#999;}
setTimeout(() => { .tooltip{width:200px;padding:14px;position:absolute;left:20%;top:0;right:0;color:#999;background:white;text-align:left;z-index:-1;box-shadow:0 1px 3px rgba(0, 0, 0, .1);}
this.registerButtonContent = '注册'; .tooltip:after{width:0;height:0;content:"";position:absolute;right:100%;top:18px;color:#87CEFA;border:8px solid;border-right-color:white;}
}, 5000);
}, #login_footer,#register{}
}, #login_btn,#register_btn{width:100%;height:60px;line-height:60px;outline:0;border:none;color:white;font-weight:bold;font-size:20px;background:#77CA60;border-radius:0 0 10px 10px;cursor:pointer;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);}
}; .ing{width:100%;height:5px;position:absolute;bottom:60px;}
</script>
#register_link,#login_link{width:80px;display:block;margin:20px auto;color:white;border-bottom:1px dashed;}
<style scoped>
/* #Tooltip Styles /*下拉菜单*/
================================= */ .option{width:330px;position:absolute;margin:0 0 0 15px;text-align:left;background:#F0F0F0;cursor:pointer;border-radius:3px;}
.option_result{display:inline-block;padding:11px 15px;}
.tooltip { .option_arrow{padding:10px 19px;float:right;}
position: absolute; .option_arrow .arrow{width:0;height:0;font-size:0;border:6px solid;border-color:#6F7880 #F0F0F0 #F0F0F0;}
top: 50%; .option_list{background:#F3F3F3;display:none;}
left: 20%; .option_list li{padding:10px 15px;float:none;}
transform: translate(-20%, -50%); .option_list li:hover{background:#DFDFDF;}
background-color: #333;
color: #fff; Javascript代码
padding: 5px 10px; /**
font-size: 14px; * 输入框被点击
border-radius: 4px; */
} function onClick(){
/* #Option Styles //对函数的第一个参数进行判断
================================= */ if (arguments[0]) {
var obj = arguments[0];
.option { }else{
position: relative; return false;
} }
.option_result { //获取.tooltip
display: inline-block; var tooltip = $(obj).siblings('.tooltip');
padding: 10px; //.tooltip如果存在，就滑出
font-weight: bold; if (tooltip.length != 0) {
border: 1px solid #ccc; //对函数第二个参数进行判断
-webkit-border-radius: 4px; if (arguments[1]) {
border-radius: 4px; var text = arguments[1];
cursor: pointer; }else{
} text = tooltip.data('text');
}
.option_arrow { //设置提示框文字
position: absolute; tooltip.text(text);
top: 50%; //滑出提示框
margin-top: -8px; tooltip.animate({left:'120%'});
right: 10px; };
width: 0; }
height: 0;
border-top: 8px solid #eee; /**
border-left: 8px solid transparent; * 输入框失去焦点
border-right: 8px solid transparent; */
cursor: pointer; function onBlur(){
} //对函数的第一个参数进行判断
if (arguments[0]) {
.option_arrow.active { var obj = arguments[0];
border-top: 8px solid #fff; }else{
} return false;
}
.option_list {
display: none; //获取.tooltip
position: absolute; var tooltip = $(obj).siblings('.tooltip');
top: 100%; //.tooltip如果存在，就滑入
left: 0; if (tooltip.length != 0) {
background-color: #fff; tooltip.animate({left:'20%'});
border: 1px solid #ccc; };
border-radius: 4px; padding: 10px; z-index: 100; cursor: pointer; } .option_list li:hover { background-color: #f5f5f5; } }
/* Other Styles ================================= */ .container { width: 960px; margin: 0 auto; } /**
* 表单验证
.form-group { position: relative; margin-bottom: 20px; } */
function checkForm(){
.form-group input { display: block; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-size: 14px; outline: none; } //对函数的第一个参数进行判断
if (arguments[0]) {
#login_btn, #register_btn { display: block; height: 40px; width: 120px; background-color: #333; color: #fff; border: none; -webkit-border-radius: 4px; border-radius: 4px; margin-top: 20px; cursor: pointer; } //获取当前表单
var form = arguments[0];
#login_btn:hover, #register_btn:hover { background-color: #222; } }else{
return false;
#login_footer .ing, #register_footer .ing { display: inline-block; margin-right: 10px; width: 20px; height: 20px; border: 2px solid #333; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; -webkit-border-radius: 50%; border-radius: 50%; } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } //验证规则汇总
var id = new RegExp(/[0-9]{18}/);//匹配数字18次，用于身份证号码匹配
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } var password = new RegExp(/\w{6,16}/);//字母6到16次，用于密码匹配
var chinese = new RegExp(/[^\u4e00-\u9fa5]|^$/);//匹配中文以外的字符，用于真实姓名验证
#login_footer .ing.hide, #register_footer .ing.hide { display: none; } var email = new RegExp(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/);//用于邮箱格式验证
.arrow { position: absolute; width: 0; height: 0; border-top: 7px solid #666; border-left: 7px solid transparent; border-right: 7px solid transparent; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; } //用户名username验证(同样适用身份证验证)
if (form.username != undefined && !id.test(form.username.value)) {
.active .arrow { border-top: 7px solid #fff; } //不符合匹配规则
onClick($(form.username)[0],'身份证号码不规范，应为18位数字');
</style> //阻止页面跳转
\ No newline at end of file return false;
};
//密码password验证
if (form.password != undefined && !password.test(form.password.value)) {
//不符合匹配规则
onClick($(form.password)[0],'密码不规范，应为6~16位字母和数字');
//阻止页面跳转
return false;
};
//用户类型type验证
if ($(form).find('.option_result').text() == '用户类型') {
//用户没有勾选
onClick($('.option_result')[0],'请选择用户类型');
//阻止页面跳转
return false;
};
//真实姓名realname验证
if (form.realname != undefined && chinese.test(form.realname.value)) {
//有非中文字符
onClick($(form.realname)[0],'姓名不规范');
//阻止页面跳转
return false;
};
//真实身份证号码id验证
if (form.ID != undefined && !id.test(form.ID.value)) {
//不符合匹配规则
onClick($(form.ID)[0],'身份证号码不规范，应为18位数字');
//阻止页面跳转
return false;
};
//邮箱email验证
if (form.email != undefined && !email.test(form.email.value)){
//不符合匹配规则
onClick($(form.email)[0],'不是有效地电子邮件地址');
//阻止页面跳转
return false;
};
}
$(document).ready(function(){
/**
* 展开/收起下拉列表
*/
$('.option').click(function(){
$(this).children('.option_list').slideToggle(100);
$(this).toggleClass('active');
});
/**
* 设置option的值
*/
$('.option_list li').click(function(){
//获取选择的值
var text = $(this).text();
//设置option的值
$(this).parent().siblings('.option_result').text(text);
//如果存在就收起提示栏
var tooltip = $(this).parent();//原生js的parentNode是属性而不是方法
if (tooltip.length != 0) {
onBlur(tooltip[0]);//需要传入原生js对象
};
});
/**
* 切换到注册栏
*/
$('#register_link').click(function(){
//滑出#login栏，滑入#register栏
$('#login').animate({left:'-100%'},400,function(){
$('#register').animate({left:'50%'});
});
});
/**
* 切换到登陆栏
*/
$('#login_link').click(function(){
//滑出#register栏，滑入#login栏
$('#register').animate({left:'120%'},400,function(){
$('#login').animate({left:'50%'});
});
});
/**
* 登录
*/
$('#login_btn').click(function(){
var $obj = $(this);
$obj.text('登录中...');
setTimeout(function(){
$obj.text('登录');
},5000);
});
/**
* 注册
*/
$('#register_btn').click(function(){
var $obj = $(this);
$obj.text('注册中...');
setTimeout(function(){
$obj.text('注册');
},5000);
});
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或