话不多说直接上效果图
vue 注册首页
校验
滑动验证
页面源码
<template>
<div id="loginWrap">
<div id="loginArea">
<!--<el-tooltip class="item" effect="dark" :content="$t('login.change')" placement="bottom-end">-->
<!--<i class="exChange el-icon-fa-exchange" @click="exChange"></i>-->
<!--</el-tooltip>-->
<div class="loginPanel regPanel">
<h1><img src="../../assets/css/theme1/images/logo.png"/>{{$t('login.title')}}</h1>
<div class="login">
<div class="province">
<h2>注册</h2>
<!--<lang-select class="set-language"></lang-select>-->
</div>
<div class="form-group">
<el-form class="loginFrom" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
<!--登录名-->
<el-form-item prop="userName" label-width="0px">
<i class="fa el-icon-fa-user-o"></i>
<el-input type="text" :placeholder="$t('login.username')" name="userName" v-model.trim="ruleForm.userName" autoComplete="on" @keyup.enter.native="submitButton" clearable></el-input>
</el-form-item>
<!--手机号-->
<el-form-item prop="tel" label-width="0px">
<i class="fa el-icon-fa-mobile-phone"></i>
<el-input type="tel" :placeholder="$t('login.tel')" name="tel" v-model.trim="ruleForm.tel" autoComplete="on" @keyup.enter.native="submitButton" clearable></el-input>
</el-form-item>
<!--验证码-->
<el-row :gutter="10">
<el-col :span="17">
<el-form-item prop="smscode" label-width="0px">
<i class="fa el-icon-fa-envelope-o"></i>
<el-input type="smscode" ref="smscode" :placeholder="$t('login.smscode')" name="smscode" v-model.trim="ruleForm.smscode" autoComplete="on" @keyup.enter.native="submitButton" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<!--发送验证码-->
<el-button class="loginBtn codeBtn" type="primary" :disabled='isDisabled' @click="sendCode">{{buttonText}}</el-button>
</el-col>
</el-row>
<!--公司名称-->
<el-form-item prop="companyname" label-width="0px">
<i class="fa el-icon-fa-home"></i>
<el-input type="text" ref="pass" :placeholder="$t('login.companyname')" name="companyname" v-model="ruleForm.companyname" autoComplete="on" clearable></el-input>
</el-form-item>
<!--联系人-->
<el-form-item prop="contactperson" label-width="0px">
<i class="fa el-icon-fa-address-book-o"></i>
<el-input type="contactperson" ref="pass" :placeholder="$t('login.contactperson')" name="contactperson" v-model="ruleForm.contactperson" autoComplete="on" clearable></el-input>
</el-form-item>
<!--Emaill-->
<el-form-item prop="email" label-width="0px">
<i class="fa el-icon-fa-envelope"></i>
<el-input type="email" ref="pass" :placeholder="$t('login.email')" name="email" v-model="ruleForm.email" autoComplete="on" clearable></el-input>
</el-form-item>
<!--密码-->
<el-form-item prop="password" label-width="0px">
<i class="fa el-icon-fa-lock"></i>
<el-input type="password" ref="pass" :placeholder="$t('login.password')" name="password" v-model.trim="ruleForm.password" autoComplete="on" @keyup.enter.native="submitButton" clearable></el-input>
</el-form-item>
<!--确认密码-->
<el-form-item prop="checkpassword" label-width="0px">
<i class="fa el-icon-fa-lock"></i>
<el-input type="password" ref="pass" :placeholder="$t('login.checkpassword')" name="checkpassword" v-model.trim="ruleForm.checkpassword" autoComplete="on" @keyup.enter.native="submitButton" clearable></el-input>
</el-form-item>
<el-button class="loginBtn" type="primary" :loading="logining" v-popover:popover @click="submitButton" >{{$t('login.submit')}}</el-button>
<el-form-item label-width="0px" class="serverSel" v-if="serverVis">
<i class="fa el-icon-fa-database"></i>
<el-select v-model="server" popper-class="serverSelList" filterable placeholder="跳转至分服务器" @change="handlerServer">
<el-option v-for="item in serverOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<!--验证码弹窗-->
<el-popover popper-class="slidingPictures" ref="popover" trigger="manual" v-model="visible" >
<div class="sliding-pictures">
<div class="vimg">
<canvas id="sliderBlock"></canvas>
<canvas id="codeImg"></canvas>
</div>
<div class="slider">
<div class="track" :class="{pintuTrue: puzzle }">
{{ tips }}
</div>
<div class="button el-icon-s-grid" @mousedown.prevent="drag"></div>
</div>
<div class="operation">
<span title="关闭验证码" @click="visible = false" class="el-icon-circle-close" ></span>
<span title="刷新验证码" @click="canvasInit" class="el-icon-refresh-left" ></span>
</div>
</div>
</el-popover>
<div class="tips">
<span style="cursor: pointer;" @click="toLogin()">已有账号,返回登录</span>
</div>
</div>
</div>
</div>
</div>
</template>
点击确认调用方法
<el-button class="loginBtn" type="primary" :loading="logining" v-popover:popover @click="submitButton" >{{$t('login.submit')}}</el-button>确认按钮方法
// 确认按钮
submitButton () {
this.$refs['ruleForm'].validate(valid => {
if (valid) {
this.visible = true
this.puzzle = false
this.tips = '拖动左边滑块完成上方拼图'
}
})
},全部源码下载链接