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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
了解前端理论:rscss和rsjs
May 23 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
eAccelerator的安装与使用详解
2013/06/13 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP类的特性实例分析
2016/09/28 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
可以将word转成html的js代码
2010/04/11 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
JavaScript中的this机制
2016/01/30 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
原生JS实现留言板
2020/03/26 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
基于Python实现文件大小输出
2016/01/11 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python绘制封闭多边形教程
2020/02/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
班级学习计划书
2014/04/27 职场文书
导师工作推荐信范文
2014/05/17 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
庆元旦演讲稿
2014/09/15 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
交通处罚决定书
2015/06/24 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android