admin管理员组文章数量:1634391
1.html
<div id="pic" @mousedown="down" @mousemove="move" v-show="keybord">
<div class="inputBtnList">
<button @click="traceNumber" v-for="(item, key) in buttons" :key="key">{{item}}</button>
</div>
<img src="../assets/img/drg.png" class="drg" />
</div>
2.js: data
//虚拟键盘
isReadOnly: true, //获取输入框焦点禁止弹出系统输入法
keybord: false, //获取焦点的时候输入法显示
buttons: [1, 2, 3, 4, 5, 6, 7, 8, 9, '删除', 0, '确定', '关闭', '.'], //按键
//键盘拖动相关
position: {
x: 0,
y: 0
},
cx: '',
cy: '',
x: '',
y: '',
l: '',
t: '',
r: '',
b: '',
nx:0,
ny:0
3.js:methods
//获取焦点键盘显示
focus(index) {
this.keybord = true //获取焦点键盘显示
//这里的延迟原因是因为当键盘超过可视边界的时候禁止拖动,而由于我是先隐藏获取焦点再出现导致获取不到键盘的宽高导致可以拖出可视区域,所以加了个延迟(有好的方法希望大家多多推荐)
setTimeout(()=>{
let moveDiv = document.querySelector("#pic");
this.x = moveDiv.offsetWidth;
this.y = moveDiv.offsetHeight;
},2)
},
//键盘按键相关
traceNumber(event) {
const btnText = event.target.textContent //点击键盘获得数值
if(btnText === '确定') {
this.keybord = false
} else if(btnText === '关闭') {
this.keybord = false
} else if(btnText === '删除') {
this.itemList[this.keyIndex].value = valscore.substring(0, valscore.length - 1)
if(this.itemList[this.keyIndex].value == '') {
this.itemList[this.keyIndex].value = ""
}
} else {
let iptval = valscore + btnText
}
},
4.这里是写的是键盘拖动相关
mounted() {
letmoveDiv = document.querySelector("#pic");
this.w = document.documentElement.clientWidth || document.body.clientWidth;
this.h = document.documentElement.clientHeight || document.body.clientHeight;
moveDiv.addEventListener('touchstart', this.down, {
passive: false
})
moveDiv.addEventListener('touchmove', this.move, {
passive: false
})
},
- // 实现移动端拖拽
down() {
let moveDiv = document.querySelector("#pic");
var touch;
if(event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = moveDiv.offsetLeft; //左偏移量
this.dy = moveDiv.offsetTop; //上移量
},
move() {
let moveDiv = document.querySelector("#pic")
var touch;
if(event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
//组织默认事件,防止body滑动
event.preventDefault();
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx + this.nx;
this.yPum = this.dy + this.ny;
//边界判断
this.xPum = this.xPum > 0 ? this.xPum : 0;
this.yPum = this.yPum > 0 ? this.yPum : 0;
this.xPum = this.xPum > this.w - this.x ? this.w - this.x : this.xPum;
this.yPum = this.yPum > this.h - this.y ? this.h - this.y : this.yPum;
//这里的判断是因为手指点击键盘太过敏感,轻触会使键盘发生位移,所以判断当位移超过25才会位移
if((this.nx < 25 && this.nx > -25) && (this.ny < 25 && this.ny > -25)) {
this.nx = 0;
this.ny = 0;
return false;
}
moveDiv.style.left = this.xPum + "px";
moveDiv.style.top = this.yPum + "px";
}
版权声明:本文标题:vue-cil手写虚拟数字键盘,在移动端可随意拖动 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729187262a1189157.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论