触摸屏触摸弹窗（用户体验）

  <div class="floatPrompt" v-show="item_show_id==li.id"> {{li.item_name}}</div>

注释：示例中的v-show条件为li的id 等于item_show_id 

item_show_id 为动态 

li id为 项目参数

 

data: {

item_show_id:'',

li:[

　　{id:1,ltem_name:'啊实打实大苏打实打实的'}

　　]

}

 

// =================================================================================

            // 方法组合:

            // gotouchstart() //手指头长按

            // gotouchend()//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件

            // gotouchmove() //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 

            // js

            gotouchstart(li) {

                let _this = this;

                clearTimeout(_this.timeOutEvent);//清除定时器

                _this.timeOutEvent = 0;

                _this.timeOutEvent = setTimeout(function () {

                    //执行长按要执行的内容，

                    console.log("触摸开始")

                    if(li.item_name.length>9){

                        _this.item_show_id=li.id

                    }

                }, 600);//这里设置定时

            },

            //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件

            gotouchend(li) {

                let _this = this

                clearTimeout(_this.timeOutEvent);

                if (_this.timeOutEvent != 0) {

                    console.log('触摸结束')

                    _this.item_show_id=""

                    //这里写要执行的内容（尤如onclick事件）

                }

            },

            //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 

            gotouchmove(li) {

                let _this = this

                console.log("手指头移动了")

                clearTimeout(_this.timeOutEvent);//清除定时器

                _this.item_show_id=""

                console.log(li)

                _this.timeOutEvent = 0;

            },
==================================================

效果