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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
详解iframe与frame的区别
Jan 13 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
smtp邮件发送一例
2006/10/09 PHP
20个PHP常用类库小结
2011/09/11 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
urllib2自定义opener详解
2014/02/07 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python实现弹窗祝福效果
2019/04/07 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python 自动识别并连接串口的实现
2021/01/19 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
班组长安全职责
2014/01/05 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python