vue-cil手写虚拟数字键盘，在移动端可随意拖动

admin管理员组

文章数量:1634436

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
	})
},

5. // 实现移动端拖拽

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";
}

本文标签： 拖动随意数字键盘vuecil