这是一个提示框和对话框,例:

 

这是一个组件 eject.vue

<template>
<div class='kz-cont' v-show='showstate'>
<div class='kz-wrapper' >
<div class='kz-text'>
<strong><slot name='text' ></slot></strong>
</div>
<div class='footer'>
<div @click='tocancel' class='kz-btn'>取消</div>
<div class='kz-btn' @click='took'>确定</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:'eject',
props:['type','showstate'],
methods:{
tocancel:function(){
this.$emit('tocancel');
},
took:function(){
this.$emit('took');
}
}
}
</script>
<style scoped>
.kz-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;z-index: 500;background:rgba(0,0,0,0.3);text-align:center;overflow: hidden;white-space:nowrap;}
.kz-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}
.kz-wrapper{display:inline-block;vertical-align:middle;background:#fff;color:#333333;border-radius: 5px;max-width:100%;}
.kz-text{text-align:center;padding:20px 75px;}
.footer{display:flex;border-top:1px solid #E5E5E5;color:#488BF1;}
.kz-btn{flex:1;padding: 12px;}
.kz-btn +.kz-btn{border-left:1px solid #E5E5E5;}
</style>

在子组件调用使用

<script>
import Eject from './eject'
export default{
name:'demo',
components:{
Eject
},
data(){
return {
showa:false,
showc:false,
msg:""
}
},
methods:{
alerts(){
this.showa=true;
},
confirms(){
this.showc=true;
this.msg="这是一个对话的弹窗";
},
okfall(){
this.showa=false;
},
cancelfall(){
this.showc=false;
},
okfall2(){
this.showc=false;
}
}
}
</script>

html代码

<template>
<div class='zk-box'>
<div class='zk-flex zk-pd'>
<div class='zk-btn' @click='alerts'>提示框</div>
<Eject type='alert' @took='okfall' :showstate='showa'>
<span slot='tlt'>提示</span>
<div slot='text'>这是一个提示弹窗</div>
</Eject>
</div>
<div class='zk-flex zk-pd'>
<div class='zk-btn zk-blue' @click='confirms'>对话框</div>
<Eject type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
<span slot='tlt'>确认</span>
<div slot='text'>{{msg}}</div>
</Eject>
</div>
</div>
</template>

整体代码

<template>
<div class='zk-box'>
<div class='zk-flex zk-pd'>
<div class='zk-btn' @click='alerts'>提示框</div>
<Eject type='alert' @took='okfall' :showstate='showa'>
<span slot='tlt'>提示</span>
<div slot='text'>这是一个提示弹窗</div>
</Eject>
</div>
<div class='zk-flex zk-pd'>
<div class='zk-btn zk-blue' @click='confirms'>对话框</div>
<Eject type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
<span slot='tlt'>确认</span>
<div slot='text'>{{msg}}</div>
</Eject>
</div>
</div>
</template>
<script>
import Eject from './eject'
export default{
name:'demo',
components:{
Eject
},
data(){
return {
showa:false,
showc:false,
msg:""
}
},
methods:{
alerts(){
this.showa=true;
},
confirms(){
this.showc=true;
this.msg="这是一个对话的弹窗";
},
okfall(){
this.showa=false;
},
cancelfall(){
this.showc=false;
},
okfall2(){
this.showc=false;
}
}
}
</script>
<style>
.zk-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:4.5rem 0;}
.zk-flex{flex:1;}
.zk-pd{padding:0.5rem 0.1rem;}
.zk-btn{display:block;line-height:0.88rem;text-align:Center;color:#fff;border-radius: 0.12rem;background:#488BF1 ;}
.zk-blue{background:#488BF1;}
</style>

这就是封装好了的组件和使用方法,哪里需要弹窗直接调用就可以了

这是一个提示框和对话框,例:     
这是一个组件 eject.vue<template>  <div class='kz-cont' v-show='showstate'>    <div class='kz-wrapper' >      <div class='kz-text'>        <strong><slot name='text' ></slot></strong>      </div>      <div class='footer'>        <div @click='tocancel' class='kz-btn'>取消</div>        <div class='kz-btn' @click='took'>确定</div>      </div>    </div>  </div></template><script>  export default{    name:'eject',    props:['type','showstate'],    methods:{      tocancel:function(){        this.$emit('tocancel');      },      took:function(){        this.$emit('took');      }    }  }</script><style scoped>  .kz-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;z-index: 500;background:rgba(0,0,0,0.3);text-align:center;overflow: hidden;white-space:nowrap;}  .kz-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}  .kz-wrapper{display:inline-block;vertical-align:middle;background:#fff;color:#333333;border-radius: 5px;max-width:100%;}  .kz-text{text-align:center;padding:20px 75px;}  .footer{display:flex;border-top:1px solid #E5E5E5;color:#488BF1;}  .kz-btn{flex:1;padding: 12px;}  .kz-btn +.kz-btn{border-left:1px solid #E5E5E5;}</style>12345678910111213141516171819202122232425262728293031323334353637在子组件调用使用<script>  import Eject from './eject'  export default{    name:'demo',    components:{      Eject    },    data(){      return {        showa:false,        showc:false,        msg:""      }    },    methods:{      alerts(){        this.showa=true;      },      confirms(){        this.showc=true;        this.msg="这是一个对话的弹窗";      },      okfall(){        this.showa=false;      },      cancelfall(){        this.showc=false;      },      okfall2(){        this.showc=false;      }    }  }</script>12345678910111213141516171819202122232425262728293031323334html代码<template>    <div class='zk-box'>      <div class='zk-flex zk-pd'>        <div class='zk-btn' @click='alerts'>提示框</div>        <Eject  type='alert' @took='okfall' :showstate='showa'>          <span slot='tlt'>提示</span>          <div slot='text'>这是一个提示弹窗</div>        </Eject>      </div>      <div class='zk-flex zk-pd'>        <div class='zk-btn zk-blue' @click='confirms'>对话框</div>        <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>          <span slot='tlt'>确认</span>          <div slot='text'>{{msg}}</div>        </Eject>      </div>    </div></template>123456789101112131415161718整体代码<template>    <div class='zk-box'>      <div class='zk-flex zk-pd'>        <div class='zk-btn' @click='alerts'>提示框</div>        <Eject  type='alert' @took='okfall' :showstate='showa'>          <span slot='tlt'>提示</span>          <div slot='text'>这是一个提示弹窗</div>        </Eject>      </div>      <div class='zk-flex zk-pd'>        <div class='zk-btn zk-blue' @click='confirms'>对话框</div>        <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>          <span slot='tlt'>确认</span>          <div slot='text'>{{msg}}</div>        </Eject>      </div>    </div></template><script>  import Eject from './eject'  export default{    name:'demo',    components:{      Eject    },    data(){      return {        showa:false,        showc:false,        msg:""      }    },    methods:{      alerts(){        this.showa=true;      },      confirms(){        this.showc=true;        this.msg="这是一个对话的弹窗";      },      okfall(){        this.showa=false;      },      cancelfall(){        this.showc=false;      },      okfall2(){        this.showc=false;      }    }  }</script><style>  .zk-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:4.5rem 0;}  .zk-flex{flex:1;}  .zk-pd{padding:0.5rem 0.1rem;}  .zk-btn{display:block;line-height:0.88rem;text-align:Center;color:#fff;border-radius: 0.12rem;background:#488BF1 ;}  .zk-blue{background:#488BF1;}</style>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960这就是封装好了的组件和使用方法,哪里需要弹窗直接调用就可以了————————————————版权声明:本文为CSDN博主「zeke_x」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/weixin_41997724/article/details/82687005

vue封装一个弹框组件的更多相关文章

  1. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  2. vue移动端弹框组件

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  3. vue封装公用弹出框方法,实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  4. 移动端(H5)弹框组件--简单--实用--不依赖jQuery

    俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...

  5. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  6. vue实现一个简易Popover组件

    概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...

  7. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  8. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  9. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

随机推荐

  1. Luogu U13059 某种密码

    应该没什么用的题目链接 题目背景 关于某种密码有如下描述:某种密码的原文A是由N个数字组成,而密文B是一个长度为N的01数串,原文和密文的关联在于一个钥匙码KEY.若KEY=∑▒[Ai*Bi],则密文 ...

  2. python给字段名和值都加上引号

    import re c = ''' Accept: application/json, text/javascript, */*; q=0.01 Accept-Encoding: gzip, defl ...

  3. 牛客小白月赛17 G 区间求和

    传送门 题意: 题解: 原本想着使用暴力方法: 1 #include<stdio.h> 2 #include<string.h> 3 #include<iostream& ...

  4. Miller_Rabbin算法判断大素数

    普通的素数测试我们有O(√ n)的试除算法.事实上,我们有O(s*log³n)的算法. 下面就介绍一下Miller_Rabbin算法思想: 定理一:假如p是质数,且(a,p)=1,那么a^(p-1)≡ ...

  5. C# 异常重试策略

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 国产网络测试仪MiniSMB - 双击就可以直接编辑数据报文字段(如IP地址)

    国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...

  7. Leetcode(144)-二叉树的前序遍历

    给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 二叉树的前序遍历有递归 ...

  8. mssql 2005安装

    SQL Server 2005详细安装过程及配置   说明:个人感觉SQL Server 2005是目前所有的SQL Server版本当中最好用的一个版本了,原因就是这个版本比起其它版本来说要安装简单 ...

  9. 如何实现一个简易版的 Spring - 如何实现 @Component 注解

    前言 前面两篇文章(如何实现一个简易版的 Spring - 如何实现 Setter 注入.如何实现一个简易版的 Spring - 如何实现 Constructor 注入)介绍的都是基于 XML 配置文 ...

  10. Spring Cloud Alibaba+Nacos搭建微服务架构

    1. Spring Cloud Alibaba 简介    Spring Cloud Alibaba是阿里巴巴为分布式应用提供的一站式解决方案,能够更方便快捷地搭建分布式平台,nacos拥有着替换eu ...