app实现长按出现弹窗 或者 出现 删除

<!-- Kpi -->

<template>

<div class="kpi_container">

<nav-bar :title="title"></nav-bar>

<scroll class="content" :data="list">

<ul class="list-wp">

<li v-for="(item,index) in list" :key="index" @touchstart.prevent="touchinUk(index,item.id,$event)" @touchend.prevent="cleartime(index)">  //长按事件 和 长按结束事件清楚定时器

<van-image

width="100%"

height="100%"

src="http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1540527.jpg"

/>

<div class="text">

<h3 class="title">{{item.title}}</h3>

<span class="number">{{item.num}}</span>

 //核心思想（遍历的时候直接就给每一个li添加上遮罩层 或者 弹框  然后用v-show判断）

</div>

<div class="mask" v-show="isID==item.id">   //这里用赋值完毕的id 和 判断 后台的id是否相等

<a href="javascript:;" @click="del(item.id)">删除</a>  //这里是遮罩层里面的删除

</div>

</li>

</ul>

</scroll>

</div>

</template>

<script>

import NavBar from "@/components/NavBar/NavBar";

import scroll from "@/base/scroll";

export default {

data() {

return {

title: "KPI订阅",

list: [

{id:0, title: "今日供水量", num: "56m³" },

{id:1, title: "抄表完成总量", num: "5581个" },

{id:2, title: "应急抢修上报总量", num: "56个" },

{id:3, title: "设备检测总数", num: "127个" }

],

isID:-1

};

},

methods: {

touchinUk(index,id,e) {

// console.log(e.target.parentNode.parentNode);

// console.log(index,id);

// var that = this

clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器

this.Loop = setTimeout(

function() {

console.log(this.isID)

this.isID = id  当长按的时候 赋值id

if(index==id){     //后面可以不写 不过如果是写遮罩层 需要弹框 需要判断 

console.log(e.target.parentNode.parentNode);

e.target.parentNode.parentNode.style.position = "relative"   

// window.confirm("是否删除")

// console.log(this)

}

 

// this.$dialog

// .confirm({

// message: "是否删除地址"

// })

// .then(() => {

// console.log("删除");

// this.arr.splice(index, 1);

// })

// .catch(() => {

// // on cancel

// console.log("不删");

// });

}.bind(this),

1000

);

},

del(id){

console.log(id)

},

cleartime(index) {

// 这个方法主要是用来将每次手指移出之后将计时器清零

clearInterval(this.Loop);

}

},

components: {

NavBar,

scroll

}

};

</script>

<style scoped>

.mask {    //这是遮罩层的样式

position: absolute;

top: 0;

left: 0;

height: 200px;

width: 400px;

background-color: rgba(0,0,0,.5);

color: #fff;

width: 100%;

height: 100%;

text-align: center;

display: block;

 

}

.mask a {  //这是遮罩层的样式 里面的删除按钮

color: #fff;

text-decoration: none;

border: 1px solid #ccc;

border-radius: 27px;

width: 56px;

height: 23px;

text-align: center;

line-height: 208px;

font-size: 23px;

padding: 6px 17px;

}

.dilog {

width: 100%;

height: 100%;

background: rgba(0,0,0,.3);

position: absolute;

left: 0;

top: 0;

}

.kpi_container {

position: relative;

width: 100%;

}

.kpi_container .content {

position: fixed;

top: 46px;

bottom: 50px;

width: 100%;

overflow: hidden;

padding: 0 35px;

box-sizing: border-box;

}

.kpi_container .content .list-wp {

padding: 20px 0;

}

.kpi_container .content .list-wp li {

width: 100%;

height: 216px;

background: #eee;

border-radius: 20px;

margin-bottom: 32px;

overflow: hidden;

position: relative;

}

.kpi_container .content .list-wp li .text {

position: absolute;

left: 212px;

top: 50%;

transform: translate(0, -50%);

}

.kpi_container .content .list-wp li .text .title,

.number {

font-size: 40px;

font-weight: 500;

color: rgba(255, 255, 255, 1);

}

</style>