Vue自定义全局弹窗组件操作


Posted in Javascript onAugust 11, 2020

写在前面

页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了

效果图

Vue自定义全局弹窗组件操作

弹窗组件

新建一个弹窗的组件——popup.vue

<template>
 <transition name='fade'>
  <!-- 蒙版 -->
  <div class="mask" v-if="show" @touchmove.prevent>
   <div class="window">
    <img class="shadow" :src="imgUrl" alt="">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
    <button @click="btnClick">{{btnText}}</button>
   </div>
   <img @click="show = false" v-fb class="close" src="../../../pages/signin/dialog/images/关闭.png" alt="">
  </div>
 </transition>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   show: false,
   imgUrl: '',
   title: '',
   content: '',
   btnText: '',
   click: ''
  }
 },
 created () {
 },
 methods: {
  btnClick () {
   this.click()
   this.show = false
  }
 }
}
</script>

<style lang="less" scoped>
 @import "../../../assets/css/minx/minx";
 @import "../../../assets/css/pixel/pixel";
 // 渐变过渡
 .fade-enter,
 .fade-leave-active {
  opacity: 0;
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity .35s;
 }
 // 全局弹窗
 .mask {
  .fixed;
  z-index: 10;
  background:rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   padding: 75/75rem;
  .window{
   height: 400/75rem;
   width: 100%;
   background: #fff;
   border-radius:8px;
   text-align: center;
   .shadow{
    width: 270/75rem;
    margin-top: -90/75rem;
   }
   h1{
    margin-top: 32/75rem;
    font-size:32/75rem;
    color:#f1300b;
    line-height:32/75rem;
    font-weight: 600;
   }
   p{
    margin-top: 32/75rem;
    font-size:28/75rem;
    color:#222222;
    line-height:40/75rem;
   }
   button{
    margin-top: 34/75rem;
    background:#f95644;
    border-radius:10px;
    width:23/75remx;
    height:64/75rem;
    font-size:28/75rem;
    color:#ffffff;
   }
  }
  .close{
   width:60/75rem;
   height:60/75rem;
   margin-top: 40/75rem;
  }
 }
</style>

popup.js文件

新建一个popup.js文件,写方法

import Vue from 'vue'
import Popup from './popup.vue'
const PopupBox = Vue.extend(Popup)

Popup.install = function (data) {
 let instance = new PopupBox({
  data
 }).$mount()

 document.body.appendChild(instance.$el)

 Vue.nextTick(() => {
  instance.show = true
  // show 和弹窗组件里的show对应,用于控制显隐
 })
}
export default Popup

main.js引入popup.js

// 自定义全局弹窗组件
import Vue from 'vue'
import Popup from './components/dialog/popup'
Vue.prototype.$popup = Popup.install

组件中使用方法

methods: {
 btnClick () {
  this.$popup({
   imgUrl: require('../../../static/images/shadow.png'), // 顶部图片
   title: '我是标题',
   content: '我是内容',
   btnText: '我是按钮',
   click: () => {
    // 点击按钮事件
    this.$router.push('……')
   }
  })
 }
}

方便以后自己使用,大家也可以参考哦,也希望大家多多支持三水点靠木,谢谢~~

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
layui使用label标签的方法
Sep 14 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
Openlayers实现测量功能
Sep 25 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 #Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 #Javascript
vue实现图片按比例缩放问题操作
Aug 11 #Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
小程序自定义日历效果
2018/12/29 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js