首次提交
This commit is contained in:
duan
223
components/watch-login/watch-input.vue
Normal file
223
components/watch-login/watch-input.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="main-list oBorder">
|
||||
<!-- 文本框 -->
|
||||
<input
|
||||
class="main-input"
|
||||
:value="value"
|
||||
:type="_type"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
:password="type==='password'&&!showPassword"
|
||||
@input="onInput"
|
||||
/>
|
||||
<!-- 是否可见密码 -->
|
||||
<image
|
||||
v-if="_isShowPass&&type==='password'&&!_isShowCode"
|
||||
class="img cuIcon"
|
||||
:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'"
|
||||
@tap="showPass"
|
||||
></image>
|
||||
<!-- 倒计时 -->
|
||||
<view
|
||||
v-if="_isShowCode&&!_isShowPass"
|
||||
:class="['vercode',{'vercode-run': second>0}]"
|
||||
@click="setCode"
|
||||
>{{ getVerCodeSecond }}</view>
|
||||
|
||||
|
||||
<view
|
||||
v-if="_isShowGet"
|
||||
class="vercode"
|
||||
@click="setNumberCode"
|
||||
>官方邀请码</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, countDown;
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
showPassword: false, //是否显示明文
|
||||
second: 0, //倒计时
|
||||
isRunCode: false, //是否开始倒计时
|
||||
}
|
||||
},
|
||||
props:{
|
||||
type: String, //类型
|
||||
value: String, //值
|
||||
placeholder: String, //框内提示
|
||||
maxlength: {
|
||||
//最大长度
|
||||
type: [Number,String],
|
||||
default: 20,
|
||||
},
|
||||
isShowPass:{
|
||||
//是否显示密码图标（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
isShowCode:{
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
isShowGet:{
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
codeText:{
|
||||
type: String,
|
||||
default: "获取验证码",
|
||||
},
|
||||
setTime:{
|
||||
//倒计时时间设置
|
||||
type: [Number,String],
|
||||
default: 60,
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
mounted() {
|
||||
_this=this
|
||||
//准备触发
|
||||
this.$on('runCode',(val)=>{
|
||||
this.runCode(val);
|
||||
});
|
||||
clearInterval(countDown);//先清理一次循环，避免缓存
|
||||
},
|
||||
methods:{
|
||||
showPass(){
|
||||
//是否显示密码
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
onInput(e) {
|
||||
//传出值
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
setCode(){
|
||||
//设置获取验证码的事件
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.$emit('setCode')
|
||||
},
|
||||
setNumberCode(){
|
||||
this.$emit('setNumberCode')
|
||||
},
|
||||
runCode(val){
|
||||
//开始倒计时
|
||||
if(String(val)=="0"){
|
||||
|
||||
//判断是否需要终止循环
|
||||
this.second = 0; //初始倒计时
|
||||
clearInterval(countDown);//清理循环
|
||||
this.isRunCode= false; //关闭循环状态
|
||||
return false;
|
||||
}
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.isRunCode= true
|
||||
this.second = this._setTime //倒数秒数
|
||||
|
||||
let _this=this;
|
||||
countDown = setInterval(function(){
|
||||
_this.second--
|
||||
if(_this.second==0){
|
||||
_this.isRunCode= false
|
||||
clearInterval(countDown)
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed:{
|
||||
_type(){
|
||||
//处理值
|
||||
const type = this.type
|
||||
return type == 'password' ? 'text' : type
|
||||
},
|
||||
_isShowPass() {
|
||||
//处理值
|
||||
return String(this.isShowPass) !== 'false'
|
||||
},
|
||||
_isShowCode() {
|
||||
//处理值
|
||||
return String(this.isShowCode) !== 'false'
|
||||
},
|
||||
_isShowGet() {
|
||||
//处理值
|
||||
return String(this.isShowGet) !== 'false'
|
||||
},
|
||||
_setTime() {
|
||||
//处理值
|
||||
const setTime = Number(this.setTime)
|
||||
return setTime>0 ? setTime : 60
|
||||
},
|
||||
getVerCodeSecond(){
|
||||
//验证码倒计时计算
|
||||
if(this.second<=0){
|
||||
return this.codeText;
|
||||
}else{
|
||||
if(this.second<10){
|
||||
return '0'+this.second;
|
||||
}else{
|
||||
return this.second;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./css/icon.css");
|
||||
|
||||
.main-list{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 90upx; /* Input 高度 */
|
||||
color: #333333;
|
||||
padding: 32upx;
|
||||
margin-top:18upx;
|
||||
margin-bottom: 18upx;
|
||||
}
|
||||
.img{
|
||||
width: 32upx;
|
||||
height: 32upx;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.main-input{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28upx;
|
||||
/* line-height: 100upx; */
|
||||
padding-right: 10upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
.vercode {
|
||||
color: rgba(0,0,0,0.7);
|
||||
font-size: 24upx;
|
||||
line-height: 100upx;
|
||||
}
|
||||
.vercode-run {
|
||||
color: rgba(0,0,0,0.4) !important;
|
||||
}
|
||||
.oBorder{
|
||||
border: none;
|
||||
border-radius: 2.5rem ;
|
||||
-webkit-box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
|
||||
box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user