移动端自定义输入框的vue组件 ----input
2024-10-20 05:28:24
<style scoped lang="less">
.keyboard {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
user-select: none;
font-size: 16px;
width: 100%;
}
.input-box {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 120px;
background-color: #fff;
border-radius: 8px;
font-size: 64px;
.label {
text-align: center;
width: 119px;
position: relative;
&::after {
content: "";
position: absolute;
/* display: inline-block; */
height: 64px;
top: 28px;
right: 0;
width: 2px;
background-color: rgb(221, 221, 221);
}
}
.content {
display: flex;
flex: 1;
.input {
color: #313131;
}
.cursor {
background-color: #4788c5;
width: 2px;
height: 64px;
margin-top: 28px;
margin-left: 2px;
}
.placeholder {
height: 120px;
padding-left: 38px;
}
.currency {}
}
}
</style>
<template>
<div class="keyboard">
<!-- 自定义输入框 -->
<div class="input-box" @touchstart.stop="focus">
<!-- 左侧标签 -->
<p class="label">￥ </p>
<!-- 右侧内容 -->
<div class="content">
<p class="placeholder" v-show="val.length === 0">
{{value}}
</p>
<!-- 光标 -->
<p class="cursor" :style="{visibility: cursor ? 'visible' : 'hidden'}"></p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'KeyboardInput',
components: {
},
created() {
/*闪烁光标*/
this.blinkCursor();
// document.addEventListener('touchstart', () => {
// this.blur();
// });
},
props: {
value: '',
inter: {
default: 5
},
decimal: {
default: 2
},
// label: {
// default: '消费金额'
// },
placeholder: {
default: '158898'
}
},
data() {
return {
cursor: false,
keyboard: false,
/*value 在组件中的值*/
val: '',
aIllegal: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '0..', '.'],
cursorDuration: 600,
bodyHeight: '',
bodyOverflow: ''
}
},
methods: {
/*focus*/
focus() {
/*显示键盘*/
this.showKeyboard();
/*显示光标*/
this.showCursor();
},
blinkCursor() {
clearInterval(this.intervalID);
this.intervalID = setInterval(() => {
this.cursor = !this.cursor;
}, this.cursorDuration);
},
unblinkCursor() {
clearInterval(this.intervalID);
},
/*blur*/
blur() {
/*隐藏光标*/
this.hideCursor();
/*停止光标闪烁*/
this.unblinkCursor();
/*隐藏键盘*/
this.hideKeyboard();
/*
附加 00, 如果用户输入了一个以 . 结尾的值就点完成了,
那么这个时候就在后面加上00
*/
this.toCompletion();
/*通知父组件, 老子值出来了*/
/*
校验用户输入的金额是不是为 0, 如果是的话, 直接重置
*/
this.checkValue();
this.notify();
},
showKeyboard() {
this.keyboard = true;
},
hideKeyboard() {
this.keyboard = false;
},
showCursor() {
this.cursor = true;
},
hideCursor() {
this.cursor = false;
},
checkValue() {
if (parseFloat(this.val) === 0) {
this.val = '';
}
},
/*判读是否需要加0*/
toCompletion() {
let list = this.value.split('.');
if (typeof list[1] === 'undefined') {
if (this.val !== '') {
this.val = this.val + '.';
this.completion(this.decimal);
}
} else {
if (list[1].length < this.decimal) {
this.completion(this.decimal - list[1].length);
}
}
},
completion(len) {
let v = '';
for (let i = 0; i < len; i++) {
v = v + '0';
}
this.val = this.val + v;
},
notify() {
this.$emit('input', this.val);
},
del() {
/*删除值并不会触发值的校验, 所以需要手动再触发一次*/
this.val = this.val.slice(0, -1);
this.notify();
},
/*输入*/
typing(value) {
/*如果是点击删除*/
if (value === '') {
this.del();
}
/*保存旧的值*/
let oldValue = this.val;
/*获取新的值*/
this.val = this.val + value;
/*检验新值, 如果没有通过检测, 恢复值*/
if (!this.passCheck(this.val)) {
this.val = oldValue;
return;
}
/*为了让外界同步输入, 需要发送事件*/
this.notify();
},
passCheck(val) {
/*验证规则*/
let aRules = [
this.illegalInput,
this.illegalValue,
this.accuracy
]
return aRules.every((item) => {
return item(val);
});
},
illegalInput(val) {
if (this.aIllegal.indexOf(val) > -1) {
return false;
}
return true;
},
/*非法值*/
illegalValue(val) {
if (parseFloat(val) != val) {
return false;
}
return true;
},
/*验证精度*/
accuracy(val) {
let v = val.split('.')
if (v[0].length > this.inter) {
return false;
}
if (v[1] && (v[1].length) > this.decimal) {
return false;
}
return true;
}
}
}
</script>
最新文章
- [flex布局]-flex教程
- Java读取Level-1行情dbf文件极致优化（3）
- Uncaught ReferenceError: WebForm_DoPostBackWithOptions is not defined
- JSP在动态网页上输出 三角形和菱形
- android 基础控件（EditView、SeekBar等）的属性及使用方法
- Codeforces Round #379 (Div. 2) D. Anton and Chess 模拟
- C++11显式虚函数重载
- sql server 数据库 ' ' 附近有语法错误
- MyEclipse中创建maven工程
- [置顶] Maven多模块项目 eclipse热部署 Maven项目实现 tomcat热部署 二
- STL学习总结
- Java Web开发环境配置（JDK+Tomcat++IDEA 14）
- Python和SQL Server 2017的强大功能
- Geohash-》基本使用
- js/jquery禁止页面回退
- R语言做一元线性回归
- ubuntu中更新.netcore到2.1版本
- tree-data
- 浅拷贝和深拷贝(java)
- JAVA各种泛型事例总结