<template>
<input
ref="input"
:class="$style.input"
:type="inputType"
:placeholder="placeholder"
:readonly="readOnly"
:value="inputValue"
@input="handleInput"
@focus="$emit('focus')"
@blur="$emit('blur')"
:maxlength="inputLength"/>
</template>
<script>
export default {
props: {
placeholder: {},
type: {}, // 输入框类型 - captcha: 数字证码; letter-captcha: 字母验证; mobile: 电话; text: 普通文本框
value: {},
length: {}, // 最大输入长度
role: {}, // 实际输入类型 为了兼容 可见密码输入框
readOnly: {}
},
data () {
return {
inputValue: '',
focus: false,
passwordVisible: false // 密码是否明文可见
}
},
computed: {
inputType () {
// 默认text
if (!this.type) return 'text'
let res
switch (this.type) {
case 'captcha': res = 'number'; break
case 'letter-captcha': res = 'text'; break
case 'mobile': res = 'tel'; break
default : res = this.type
}
// 密码明文可见
if (this.type == 'password' && this.passwordVisible) {
res = 'text'
}
return res
},
inputLength () {
if (this.length) return this.length
let res
switch (this.type) {
case 'mobile': res = 11; break
case 'captcha': res = 6; break
case 'bankCard': res = 19; break
}
return res
}
},
watch: {
value: {
handler (val) {
this.inputValue = val
},
immediate: true
}
},
methods: {
handleInput (e) {
if (!this.type || this.type === 'text') {
this.$emit('input', e.target.value)
return false
}
let value = this.formatVal(e.target.value)
let inputElem = this.$refs.input
inputElem.value = value
this.$emit('input', value)
// 输入到指定位数后,通知父组件
if (this.inputLength == value.length) {
this.$emit('inputComplete')
}
},
// 根据input类型格式化数据
formatVal (val) {
if (this.type === 'mobile' || this.type === 'captcha' || this.type === 'bankCard') {
return val.replace(/\D/g, '').trim()
} else if (this.role === 'password' || this.type === 'password') {
return val.replace(/[^a-zA-Z0-9]/g, '').trim()
} else if (this.type === 'idcard') {
return val.replace(/[^0-9xX]/g, '').trim()
}
return val
}
}
}
</script>
<style lang="postcss" module>
.input {
display: block;
border: none;
width: 100%;
font-size: 38px;
outline: none;
background-color: transparent;
flex: 1 1;
}
</style>
input输入框
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在...
- 在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是...
- 需求: input 输入框输入只能输入数字 开始,我的解决方法是:onkeydown: 然后测试不开心了,测试说:...