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编写的第一人称射击游戏
Feb 25 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python梯度下降算法的实现
2020/02/24 Python
使用python实现飞机大战游戏
2020/03/23 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 如何对logging日志封装
2020/12/02 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Python四款GUI图形界面库介绍
2022/06/05 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android