vue弹窗插件实战代码


Posted in Javascript onSeptember 08, 2018

vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗

popup.vue

<template>
 <div class="popup-wrapper" v-show="visible" @click="hide">
  <div class="popup-text">{{text}}</div>
 </div>
</template>

组件html结构, 外层divposition:fixed定位, 内层div显示弹窗内容

export default {
 name: 'popup',
 props: {
  text: { //文字内容
   type: String,
   default: ''
  },
  time: { //显示的时长
   type: Number,
   default: 3e3
  },
 },
 data(){
  return {
   visible: false
  }
 },
 methods: {
  open() {
   this.visible = true
   clearTimeout(this.timeout);
   this.$emit('show')
   if(this.time > 0){
    this.timeout = setTimeout(() => {
     this.hide()
    }, this.time)
   }
  },
  hide() {
   this.visible = false
   this.$emit('hide')
   clearTimeout(this.timeout);
  }
 }
}

popup.vue只有2个属性: 文本和显示时间。组件显示隐藏由内部属性visible控制,只暴露给外界open和hide2个方法,2个方法触发对应的事件

测试一下

<template>
 <popup ref="popup" text="弹窗内容" :time="1e3"></popup>
</template>
<script>
import Popup from '@/components/popup'
 ...
  this.$refs.popup.open()
  ...
</script>

vue弹窗插件实战代码

插件化

组件功能写好了,但是这种调用方式显得很累赘。举个例子layer.js的调用就是layer.open(...)没有import,没有ref,当然要先全局引用layer。我们写的弹窗能不能这么方便呢,为此需要把popup改写成vue插件。
说是插件,但能配置属性调用方法的还是组件本身,具体是实例化的组件,而且这个实例必须是全局单例,这样不同vue文件唤起popup的时候才不会打架

生成单例

// plugins/popupVm.js
import Popup from '@/components/popup'
let $vm
export const factory = (Vue)=> {
 if (!$vm) {
  let Popup = Vue.extend(PopupComponent)
  $vm = new Popup({
   el: document.createElement('div')
  })
  document.body.appendChild($vm.$el)
 }
 return $vm
}

组件实例化后是添加在body上的,props不能写在html里需要js去控制,这里写个方法让属性默认值继续发挥作用

// plugins/util.js
export const setProps = ($vm, options) => {
 const defaults = {}
 Object.keys($vm.$options.props).forEach(k => {
  defaults[k] = $vm.$options.props[k].default
 })
 const _options = _.assign({}, defaults, options)
 for (let i in _options) {
  $vm.$props[i] = _options[i]
 }
}
// plugins/popupPlugin.js
import { factory } from './popupVm'
import { setProps } from './util'

export default {
 install(Vue) {
   let $vm = factory(Vue);

   const popup = {
   open(options) {
    setProps($vm, options)
    //监听事件
    typeof options.onShow === 'function' && $vm.$once('show', options.onShow);
    typeof options.onHide === 'function' && $vm.$once('hide', options.onHide);
    $vm.open();
   },
   hide() {
    $vm.hide()
   },
   //只配置文字
   text(text) {
    this.open({ text })
   }
  }
  
  Vue.prototype.$popup = popup
 }
}

在main.js内注册插件

//main.js
import Vue from 'vue'
import PopupPlugin from '@/plugins/popupPlugin'

Vue.use(PopupPlugin)
在vue框架内调用就非常方便了

<script>
 ...
  this.$popup.text('弹窗消息')
 ...
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
jQuery bind事件使用详解
May 05 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
Vue项目分环境打包的实现步骤
Apr 02 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
You might like
php操作redis缓存方法分享
2015/06/03 PHP
php中上传文件的的解决方案
2018/09/25 PHP
js获取div高度的代码
2008/08/09 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue登录注册实例详解
2019/09/14 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python 文件和输入输出小结
2013/10/09 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python字典基本操作实例分析
2015/07/11 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
公职人员索取回扣检举信
2014/04/04 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
网络研修随笔感言
2015/11/18 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
创业计划书之服装
2019/10/07 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技