需求：

1.点击一个事件时弹出一个蒙版；

2.蒙版上有取消，删除事件；（点击取消时候蒙版消失，点击删除时，删除蒙版并消失）；

3.点击空白地方，蒙版也消失；

 
<template>
    <div class="waitPay">
        <div class="logo">
            <span></span>
            <span>保单号{{accidentData.orderId}}</span>
            <span @click="isdele">删除</span>
        </div>
        <div class="carInfo">
            <div class="text">
                <p>{{accidentData.orderMemberName}}</p>
                <p>投保人:{{accidentData.policyHolder}} </p>
                <p>被保人: {{accidentData.protectHolder}} </p>
                <p>
                    结算日期:{{accidentData.orderMemberName}}
                </p>
            </div>
            <div class="item-img">
                <img :src="orderStatus" alt="">
            </div>
        </div>
        <div class="item">
            <p>
                <span>保费 :{{accidentData.amount}}</span>
                <span>推广费 : 271.1</span>
            </p>
            <p v-show="isState">
                <span>
                    重新投保
                </span>
                <span>
                    付款
                </span>
            </p>
        </div>
        <IsDeleMask v-show="show" @isShow="isShow" />
    </div>
</template>
<script>
import IsDeleMask from "@/components/IsDeleMask.vue"; // 是否删除
export default {
props: ["accidentData"],
components: {
IsDeleMask
},
data(){
     return{
         show:false,
     }
},
computed: {
orderStatus() {
let obj = {
"10000531": require("@/assets/img/yi_chu_dan.png"), // 已出单
"10000532": require("@/assets/img/daizhifu.png"), // 待支付
"10000533": require("@/assets/img/tui-dan.jpg") // 退单
};
return obj[this.accidentData.orderStatus];
},
isState() {
let obj = {
"10000531": false, // 已出单
"10000532": true, // 未出单
"10000533": false // 退单
};
return obj[this.accidentData.orderStatus];
}
},
methods: {
isdele() {
this.show = true;
},
isShow() {
this.show = false;
}
}
};
</script>
<style lang="scss" scoped>
.waitPay {
width: 94.67%;
max-height: 4.6rem;
background-color: #fff;
margin: auto;
margin-bottom: 0.2rem;
border: 0.18rem;
> .logo {
width: 100%;
height: 0.7rem;
// background: green;
display: flex;
align-items: center;
border-bottom: 0.012rem solid #f2f2f2;
> span:nth-child(1) {
color: #f76c41;
font-weight: bold;
font-size: 0.28rem;
margin-left: 8%;
}
> span:nth-child(2) {
color: #6a6a6a;
font-size: 0.22rem;
margin-left: 8%;
margin-right: 10%;
}
> span:nth-child(3) {
text-align: right;
color: #333333;
font-size: 0.22rem;
font-weight: bold;
}
}
> .carInfo {
width: 100%;
height: 2.32rem;
// background: red;
display: flex;
border-bottom: 0.012rem solid #f2f2f2;
.text {
padding-left: 0.3rem;
width: 73.33%;
// background: yellow;
height: 2.32rem;
box-sizing: border-box;
> p {
font-size: 0.26rem;
color: #6a6a6a;
// font-weight: bold;
line-height: 0.46rem;
}
> p:nth-child(1) {
padding-top: 0.25rem;
color: #333333;
font-size: 0.3rem;
font-weight: bold;
}
}
> .item-img {
width: 26.67%;
display: flex;
margin-bottom: 0.61rem;
margin-top: 0.4rem;
justify-content: center;
> img {
width: 1.3rem;
height: 1.3rem;
align-items: center;
}
}
}
> .item {
width: 100%;
max-height: 1.58rem;
// background: green;
> p:nth-child(1) {
width: 100%;
height: 0.69rem;
display: flex;
justify-content: space-between;
align-items: center;
> span {
font-size: 0.24rem;
color: #f76c41;
font-weight: bold;
}
> span:nth-child(1) {
padding-left: 0.3rem;
}
> span:nth-child(2) {
padding-right: 0.3rem;
}
}
> p:nth-child(2) {
width: 100%;
height: 0.89rem;
> span {
width: 2rem;
height: 0.7rem;
display: inline-block;
text-align: center;
line-height: 0.7rem;
font-size: 0.26rem;
}
> span:nth-child(1) {
border: 0.012rem solid #6a6a6a;
color: #6a6a6a;
margin-left: 30.9%;
margin-right: 6.5%;
}
> span:nth-child(2) {
background-color: #f76c41;
color: white;
}
}
}
}
</style>
<template>
    <div class="isDele" @click="kbxs">
        <div class="item">
            <p>是否删除</p>
            <p>
                <span>
                    取消
                </span>
                <span>
                    删除
                </span>
            </p>
        </div>
    </div>
</template>
<script>
export default {
data() {
return {
deleData: ""
};
},
methods: {
     kbxs(e) {
         if (e.target.tagName === 'DIV') {
             this.$emit('isShow')
         }else if (e.target.tagName === 'SPAN') {
            if (e.target.innerHTML.indexOf('取消') !== -1 ) {
                this.handleClick('取消')
            }else {
                this.handleClick('删除')
            }
         }
     },
handleClick(type) {
        if (type == '取消') {
            this.$emit('isShow')
            return
        }
let datas = {
// orderId:'OPRO20180823160539323',
};
this.$http.get("delect", datas).then(({ data }) => {
if (data.code == 1) {
this.$dialog.toast({
mes: data.msg,
timeout: 1500,
icon: "success",
callback: () => {
this.$emit('isShow')
}
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.isDele {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
> .item {
width: 6.3rem;
height: 3rem;
background: #fff;
border-radius: 0.1rem;
> p:nth-child(1) {
height: 2.05rem;
color: #333333;
font-size: 0.38rem;
font-weight: bold;
text-align: center;
line-height: 2.05rem;
z-index: 200;
}
> p:nth-child(2) {
width: 100%;
height: 0.95rem;
// background: green;
> span {
color: #6a6a6a;
display: inline-block;
width: 50%;
font-size: 0.28rem;
text-align: center;
line-height: 0.95rem;
}
> span:nth-child(2) {
color: #fff;
background-color: #f76c41;
line-height: 0.97rem;
border-radius: 0 0 0.1rem 0;
}
}
}
font-size: 0.3rem;
color: green;
}
</style>
 
 

vue点击出现蒙版的更多相关文章

  1. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  2. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  3. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  4. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  6. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  7. vue 点击展开显示更多 点击收起部分隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. （1）vue点击图片预览（可旋转、翻转、缩放、上下切换、键盘操作）

    今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...

  9. vue点击元素变色兄弟元素不变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 2019秋Java学期课程总结

    眨眼间,Java这门课程就快要到了尾声,这门课程主要学习到 搭建了Java的编译环境,安装eclipse软件,会用Java写一些简单的程序. 主要学习到的知识点有以下几点 1:通过写pta上的作业知道 ...

  2. 第九周课程总结 & 实验报告（七）

    第九周课程总结 一.多线程 1.线程的状态 2.线程操作的相关方法 二.Java IO 1.操作文件的类---File ()基本介绍 ()使用File类操作文件 .RandomAccessFile类 ...

  3. Linux环境快速搭建elasticsearch6.5.4集群和Head插件

    https://blog.csdn.net/boling_cavalry/article/details/86358716

  4. CentOS 6.5 安装OSA监控精灵监控主机

    OSA监控是一个开源的图形化免费好用的监控,安装之前首先要配置好PHP环境, yum install httpd mysql mysql-server php-mysql php* -y 编辑http ...

  5. Node.js读取文件相对路径写法注意

    首先看一下文件的存放结构: 我们现在希望在上面标记的JS文件里面读取html里面的内容,我们的代码如下: var fs=require("fs"); fs.readFile('te ...

  6. hash模块MD5加密

    MD5加密:获取32位加密字符串: 示例(MD5加密'123456')import hashlibhashObject=hashlib.md5(b'123456') #实例化,加密字符串不能直接加密, ...

  7. SAS数据挖掘实战篇【六】

    SAS数据挖掘实战篇[六] 6.3  决策树 决策树主要用来描述将数据划分为不同组的规则.第一条规则首先将整个数据集划分为不同大小的 子集,然后将另外的规则应用在子数据集中,数据集不同相应的规则也不同 ...

  8. 接口自动化-python unittest+requests+HTMLrunner

    从2015年毕业入行软件测试,快满4年了,之前技术分享都在百度贴吧上面,现在正式开始在博客中记录工作技术,努力成长,加油 接口测试的步骤1.组装好该接口需要的参数数据2.使用get或post附带参数数 ...

  9. 【HANA系列】SAP ECLIPSE中创建ABAP项目失败原因解析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  10. 【VS开发】【智能语音处理】语音信号处理之（一）动态时间规整（DTW）

    语音信号处理之(一)动态时间规整(DTW) zouxy09@qq.com http://blog.csdn.net/zouxy09 这学期有<语音信号处理>这门课,快考试了,所以也要了解了 ...