<!-- 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>
