某视频剪辑软件做移动端经常碰到弹窗的需求，这里写一个功能简单的某视频剪辑软件弹窗

popup.vue

模板div class=' popup-wrapper ' v-show=' visible ' @ click=' hide ' div class=' popup-text ' { text } }/div/div/template组件超文本标记语言结构，外层divposition:fixed固定固定定位，内层差异显示弹窗内容

导出默认{ name: 'popup '，prop : { text : {//文字内容type: String，default: '' }，time: { //显示的时长type: Number，default: 3e3 }，}，data(){ return { visible : false } }，methods : { open(){ this。visible=true cleartime out(这。超时)；这个$emit('show ')如果(这个。时间0){ this。超时=setTimeout(()={ this。hide()}，this.time) }，hide() { this.visible=false this .$ emit(' hide ')清除超时(这。超时)；} }}popup.vue只有2个属性： 文本和显示时间。组件显示隐藏由内部属性看得见的控制，只暴露给外界打开和隐藏2个方法，2个方法触发对应的事件

测试一下

模板弹出ref='popup' text='弹窗内容： time=' 1e 3 '/Popup/templatescriptimport Popup from ' @/components/Popup '.这个$refs.popup.open()./脚本

插件化

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

生成单例

//plugins/Popupvm。jsimport Popup from ' @/components/Popup '让$ VM导出const factory=(Vue)={ if(！$ VM){让Popup=Vue。扩展(弹出组件)$ VM=新弹出文件({ El :文档。创建元素(' div ')})文档。尸体。appendchild($ VM .$el) }返回$vm}组件实例化后是添加在身体上的，道具不能写在超文本标记语言里需要射流研究…去控制，这里写个方法让属性默认值继续发挥作用

//插件/util。jsexport const setrops=($ VM，options)={ const default=}对象。密钥(虚拟机).$options.props).forEach(k={ defaults[k]=$vm .$options.props[k].默认}) const _options=_ .为(让我输入选项){ $vm分配({},默认值，选项)。$ props[I]=_ options[I]}//plugins/popupplugin。jsimport { factory } from “./popupVm "从导入{设定点} ./util ' export default { install(Vue){ let $ VM=factory(Vue)；const popup={ open(options){ set ops($ VM，options) //监听事件选项的类型。OnShow==' function ' $ VM .$ one(' show '，选项。昂秀)；options.onHide===' function ' $ vm的类型$ one(' hide '，选项。OnHide)；$ VM。open()；}，hide() { $vm.hide() }，//只配置文字文本(文本){这个。open({ text })} } Vue。原型。$ popup=popup } }在main.js内注册插件

//main。jsimport Vue from ' Vue ' import Popupplugin from ' @/plugin/Popupplugin ' Vue。使用(弹出窗口)在某视频剪辑软件框架内调用就非常方便了脚本.这个$popup.text('弹窗消息)./script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。