IM长按头像@并保持软键盘弹出状态

最近项目需要做一个简易的IM通讯功能，本来快做完了，产品临时加入了@功能

@功能当时想到用longpress事件来做的话，应该挺简单，但事实是，当我长按头像的时候，input输入框会失去焦点导致软键盘无法保持弹出的状态

为了这个问题，监听了touchstart和touchend事件来解决这个问题

这里touchstart、touchend事件都加上了stop和prevent修饰符，是因为我给这个页面的容器加了一个关闭弹层的事件

下面是touchstart和touchend事件的处理函数和函数中用的变量声明

//使用到的变量
data(){
    return{
    	is_ok: true, //是否达成长按时间
	touch_time: 0, //@触碰的时间
	long_time: 800, //需要长按的时间
    }
}

// 头像触摸开始
avatarTouchstart(e, msg) {
    this.touch_time = e.timeStamp //记录事件触发的时间戳
    setTimeout(() => {
        if (this.is_ok) {//this.is_ok是一个开关
            this.aitHandle(msg) // 处理@功能的函数 比如input的value插入@某某的文本 
        }
    }, this.long_time) // this.long_time:需要长按多长时间
},

// 头像触摸结束
avatarTouchend(e) {
    //如果触摸时间小于this.long_time，属于提前中断@
    if ((e.timeStamp - this.touch_time) < this.long_time) {
        this.is_ok = false //设置开关为关闭状态
    } else {
        this.is_ok = true ////设置开关为开启状态
    }
},

本文章仅提供思路，如果各位大佬有更优雅的方法，可以评论和联系我，谢谢大伙，祝大伙变得更强