Vue自定义弹窗指令的实现代码

目标

使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗

实现

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http 3360https://cdn。jsdelivr。net/NPM/js '/script/head dy div id=' app '按钮id='这是一个自定义的弹窗'}'点击我弹窗哈哈哈/button div id=' d '/div/div脚本vue。指令(' popup '，{ inserted: function (el，binding){//console。日志(绑定。价值。文本)var o=Elvar myDiv=文档。创建元素(' div ')；mydiv。风格。宽度=' 300像素'；//mydiv。风格。高度=' 130像素'；mydiv。风格。位置='固定'；mydiv。风格。top=' 50% '；mydiv。风格。左=' 50% '；mydiv。风格。transform=' translate(-50%，-100%)'；mydiv。风格。zindex=' 100mydiv。风格。背景颜色=' # f3f 5 F8 '；mydiv。风格。显示='无'；mydiv。风格。textalign=“居中”；mydiv。风格。填充顶部=' 15px ' mydiv。风格。borderradius=' 5pxmydiv。风格。borderwidth=' 1pxmydiv。风格。边框样式='实心'；mydiv。风格。边框颜色=' # 696969 '；var我的内容=文档。创建元素(' p ')；var myText=文档。createtextnode(绑定。价值。文本)；var btnWrapper=文档。创建元素(' div ')btnWrapper。风格。页边距top=' 20px ' btnWrapper。风格。底部边距=' 20px ' var my confirm=document。创建元素(“输入”)；my confirm . type=' buttonmy confirm . value='确定；我确认。风格。右边距=' 15px ' var my cancel=document。创建元素(“输入”)；my CANCEl . type=' button my CANCEl . value='取消；btnWrapper。追加子(我的确认)btnWrapper。追加子级(我的取消)我的div。追加子级(我的内容。追加子级(我的文本)我的div。追加子(btnWrapper)文档。尸体。追加子级(我的div)；o.onclick=函数（事件){ mydiv。风格。display=' block ' } myconfirm。onclick=函数（事件){ mydiv。风格。display=' none ' } mycancel。onclick=函数（事件){ mydiv。风格。display=' none ' } })var VM=new Vue({ El : ' # app，data : } })/script/body/html总结

以上所述是小编给大家介绍的某视频剪辑软件自定义弹窗指令的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！