<template>
|
<div class="inputCom font-28">
|
<span class="label textColor">{{ label }}</span>
|
<div class="iptbox inputBackground">
|
<div class="areaCode" v-if="area" @click="selectArea">
|
<!-- <span class="icon iti-flag" :class="icon"></span> -->
|
<span class="textColor">+{{ dialCode }}</span>
|
<img src="../../assets/image/login/more.png" alt="">
|
</div>
|
<input autocomplete="new-password" class="inputBackground" v-if="typeText == 'password'"
|
:type="passwordType" :placeholder="placeholderText" :value="value" @input="onInput"
|
:disabled="disabled">
|
<input class="inputBackground" v-else type="text" :disabled="disabled" :placeholder="placeholderText"
|
:value="value" @input="onInput">
|
<div class="rightCon">
|
<div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png"
|
alt="">
|
</div>
|
<div class="eyeBox" v-if="typeText == 'password'" @click="changeType">
|
<img v-if="passwordType == 'password'" src="../../assets/image/login/_close.png" alt="">
|
<img v-else src="../../assets/image/login/open.png" alt="">
|
</div>
|
</div>
|
</div>
|
<div v-if="tips" class="tips">{{ tips }}</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
label: {
|
type: String,
|
default: ''
|
},
|
placeholderText: {
|
type: String,
|
default: ''
|
},
|
typeText: {
|
type: String,
|
default: 'text'
|
},
|
clearBtn: {
|
type: Boolean,
|
default: true
|
},
|
area: {
|
type: Boolean,
|
default: false
|
},
|
value: {
|
type: [Number, String],
|
default: 0,
|
},
|
tips: {
|
type: String,
|
default: ''
|
},
|
dialCode: {
|
type: Number,
|
default: 0
|
},
|
icon: {
|
type: String,
|
default: ''
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
}
|
},
|
components: {
|
|
},
|
data() {
|
return {
|
passwordType: 'password'
|
}
|
},
|
methods: {
|
selectArea() {
|
this.$emit('selectArea', true)
|
},
|
clear() {
|
this.$emit('input', '')
|
},
|
onInput(e) {
|
this.$emit('input', e.target.value)
|
},
|
changeType() {
|
if (this.passwordType == "password") {
|
this.passwordType = 'text'
|
} else {
|
this.passwordType = 'password'
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/theme/index.scss";
|
|
.inputCom {
|
padding-bottom: 44px;
|
|
@include themify() {
|
color: themed("text_color4");
|
}
|
|
.iptbox {
|
height: 88px;
|
margin-top: 18px;
|
padding: 0 22px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-radius: 6px;
|
}
|
|
.areaCode {
|
width: 140px;
|
display: flex;
|
align-items: center;
|
padding-left: 20px;
|
justify-content: space-between;
|
height: 100%;
|
|
img {
|
width: 20px;
|
}
|
}
|
|
input {
|
flex: 1;
|
height: 100%;
|
border: none;
|
padding-left: 20px;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.rightCon {
|
display: flex;
|
}
|
|
.closeBox,
|
.eyeBox {
|
width: 34px;
|
height: 34px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.eyeBox {
|
margin-left: 28px;
|
}
|
}
|
|
.tips {
|
font-size: 26px;
|
margin-top: 18px;
|
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
|
input:-webkit-autofill {
|
-webkit-box-shadow: 0 0 0 400px $input_background inset;
|
}
|
|
input::-webkit-input-placeholder {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
|
.icon {
|
transform: scale(2);
|
display: inline-block;
|
}
|
</style>
|
