使用方法:
1.在父组件中引入"box.vue"
//import popUpBox from "./box.vue";
 
2.在父组件中注册 popUpBox
//components:{popUpBox},
 
3.放在父组件中使用
//<popUpBox></popUpBox>
 
4.调用popUpBox组件
//this.geAlert(0)
 
注:index.vue为 父组件,后者为子组件,效果图先上,可以先看是否是自己想要的组件,再选择使用
index.vue
<template>
<div>
<popUpBox ref="modal" @on-confirm="confirm">
<div slot="modal__bd">
<div class="modal_form">
<p class="txetTitle">待付款订单</p>
</div>
<p class="textFelid">您好,查看您有一笔待支付订单,可直接支付,点击下方“确认”可直接支付。</p>
</div>
</popUpBox>
</div>
</template> <script>
import popUpBox from "./box.vue"; export default {
data() {
return { };
},
components:{
//注册组件
popUpBox
},
created(){ //调用弹出层组件
this.geAlert(0) },
methods: {
geAlert(type) {
if (type === 1) this.$refs.modal.opens("alert", "南山下");
else if (type === 2)
this.$refs.modal.opens("alert", "Yan", "2407488005@qq.com");
else {
this.$refs.modal.opens("alert");
this.$refs.modal.setMaskClass("maskBack");
}
}
}
};
</script> <style lang="less" scoped>
.textFelid {
font-size: 0.6rem;
color: #000;
text-align: left;
}
.txetTitle {
font-size: 0.6rem;
color: #000;
}
.modal__bd {
padding: 0 1.6em 0.8em;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
.modal__hd_text {
padding: 1.3em 1.6em 0.5em;
}
.modal__bd_text {
font-size: 0.3rem;
line-height: 1rem;
}
.modal__bd {
padding: 0 1.6em 0.8em;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
</style>

box.vue

<template>
<div>
<div id="modal" v-show="showModal">
<div class="modal-mask" :class="maskBack"></div>
<div class="modal-body">
<div class="modal__hd">
<h3 class="modal__hd_text" v-if="title">{{title}}</h3>
<slot v-else name="modal__hd"></slot>
</div>
<div class="modal__bd">
<p class="modal__bd_text" v-if="msg&&type === 'alert'">{{msg}}</p>
<div v-else-if="msg&&type === 'confirm'" class="input_box">
<input type="text" :placeholder="msg" name="userid" ref="modalval" />
</div>
<slot v-else name="modal__bd"></slot>
</div>
<div v-if="type === 'confirm'" class="modal__ft flex">
<button class="btn modal__btn modal__btn_primary" @click="confirm()">支付</button>
<button class="btn modal__btn modal__btn_default" @click="closes();geAlert(0)">申请退款</button>
</div>
<div v-else-if="type === 'alert'" class="modal__ft">
<div class="btna modal__btn modal__btn_default" @click="queren()">确认</div>
<div class="btna border_right modal__btn modal__btn_default" @click="quxiao()">取消</div>
</div>
</div>
</div>
</div>
</template> <script>
export default {
data() {
return {};
},
methods: {
closes() {
this.showModal = false;
this.type = "alert";
this.title = "add";
this.msg = "";
this.maskBack = "";
},
opens(type, title, msg) {
this.showModal = true;
this.type = type;
this.title = title;
this.msg = msg;
this.$emit("oper");
},
confirm() {
this.$emit("on-confirm");
this.closes();
},
getVal() {
if (this.$refs.modalval) {
return this.$refs.modalval.value;
}
},
setMaskClass(back) {
this.maskBack = back || "maskBackNo";
}
}
};
</script> <style lang="less" scoped>
.modal-mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.maskBackNo {
background: inherit;
}
.modal-body {
position: fixed;
z-index: 1000;
width: 12rem;
top: 10rem;
height: 7.3rem;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
text-align: center;
border-radius: 0.5rem;
overflow: hidden;
}
.modal__bd {
padding: 0 1.6em 0.8em;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
.modal__hd_text {
padding: 1.3em 1.6em 0.5em;
}
.modal__bd_text {
font-size: 0.3rem;
line-height: 1rem;
} .input_box input {
height: 0.6rem;
border: 1px solid #d9d9d9;
border-radius: .1rem;
padding: 0 0.3rem;
width: 70%;
} .modal__ft {
position: fixed;
left: 0;
bottom: 0;
line-height: 0.8rem;
font-size: 0.35rem;
width: 100%;
}
.modal__ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #ccc;
color: #d5d5d6;
transform-origin: 0 0; transform: scaleY(0.5);
}
.modal__btn {
position: relative;
/* display: block; */
font-size: .3rem;
color: #fff;
width: 50%;
height: 1.7rem;
/* border-radius: 1rem; */
/* margin: 0 auto; */
line-height: 1.7rem;
}
.border_right{
border-right: 1px solid #e5e5e5;
box-sizing: border-box;
}
.modal__btn_primary,
.modal__btn_alert {
background-color: #fff; /* color: #fa0; */
font-size: .6rem;
width: 50%;
}
.modal__btn_default {
color: #ffaa00;
font-size: 0.6rem;
float: right;
}
.modal__btn_alert {
width: 100%;
height: 1rem;
}
.modal__btn:after {
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: .2rem;
}
</style>

Vue自行封装常用组件-弹出框的更多相关文章

  1. Vue自行封装常用组件-文本提示

    使用方法:1.在父组件中引入"toast.vue" //import toast from "./toast"; 2.在父组件中注册 toast //compo ...

  2. Vue自行封装常用组件-倒计时

    倒计时组件,比较复杂一点,大神勿调侃,精确到毫秒,因为项目中多次出现倒计时,所以拿出来分享下 使用方法:1.在父组件中引入"uni-countdown" //import uniC ...

  3. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  4. vue之element-ui设置全局弹出框

    这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框.但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出 ...

  5. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

  6. JavaScript封装一个MyAlert弹出框

    平时我们想要显示一些提示信息时会用到alert方法,alert是全局的一个方法,会短暂的中断程序,我们主要用来显示提示客户信息.但是这个方法有一定的局限性,而且本身样式也不够美观.于是我封装了一个实用 ...

  7. elementUI vue this.$confirm 和el-dialog 弹出框 移动

    调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> ...

  8. 尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框

    尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...

  9. [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭

    场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...

随机推荐

  1. linux常用命令(15)whereis命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息.和find相比,whereis查找的速度非常 ...

  2. centOS7忘记密码,修改root账号密码

    centOS7忘记密码,修改root账号密码 RHEL7 的世界发生了变化,重置 root 密码的方式也一样.虽然中断引导过程的旧方法(init=/bin/bash)仍然有效,但它不再是推荐的.“Sy ...

  3. gin框架教程:代码系列demo地址

    gin框架教程代码地址: https://github.com/jiujuan/gin-tutorial demo目录: 01quickstart 02parameter 03route 04midd ...

  4. configparser模块,subprocess 模块,xlrd,xlwt ,xml 模块,面向对象

    1. configparser模块 2.subprocess 模块 3.xlrd,xlwt 4.xml 模块 5.面向对象 面向对象是什么? 是一种编程思想,指导你如何更好的编写代码 关注点在对象 具 ...

  5. URL库函数

    1.urlopen from urllib import request resp=request urlopen('http://www.baidu.com') print(resp.read()) ...

  6. Leetcode之深度+广度优先搜索(DFS+BFS)专题-934. 最短的桥(Shortest Bridge)

    Leetcode之广度优先搜索(BFS)专题-934. 最短的桥(Shortest Bridge) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary ...

  7. python利用smtp发送邮件

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # author:IversOn5 import requests import json import ...

  8. ASP.NET Session详解(转)

    ASP.NET Session详解 本文章来自:http://blog.163.com/adam601@126/blog/static/22506317200932824210996/ 当用户在 We ...

  9. 【Python开发】Python中的class继承

    继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...

  10. 【go进阶】一个简单的go服务器实现

    光阴似箭,日月如梭,在昨天我终于拿到了自己忙活了半个月的工资. 据说在7月25日有一颗小行星掠过地球,如果真的撞上来,估计31号我就不是乐呵呵的了,应该是直接没了. 如下的代码运行起来就是一个微型go ...