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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
angular4自定义表单控件[(ngModel)]的实现
Nov 23 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php实现微信支付之现金红包
2018/05/30 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js 操作css实现代码
2009/06/11 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python人人网登录应用实例
2014/09/26 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python基本语法练习实例
2017/09/19 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
大学在校生求职信范文
2013/11/21 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
清洁工工作总结
2015/08/11 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
导游词之塘栖古镇
2019/12/04 职场文书