1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!-- jquery需要v1.8以上 --> 7 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 8 <!-- 需要从layui官网下载，将从https://layer.layui.com/下载的layer放入项目后进行引入layer.js --> 9 <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> 10 11 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 12 </head> 13 <body> 14 <div id="app"> 15 <button @click="b">点击</button> 16 </div> 17 <script type="text/javascript"> 18 new Vue({ 19 el: '#app', 20 data: { 21 name: '1' 22 }, 23 methods: { 24 b() { 25 let content = '<h1>测试</h1>' 26 layer.open({ 27 type: 1,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） 28 area: ['600px', '360px'],//宽高 29 shade: false,//不需要遮罩层，设置模态与非模态的关键 30 content, //内容 31 cancel: function(index, layero){ //关闭弹窗时的回调函数 32 if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭 33 layer.close(index) 34 } 35 return false; 36 } 37 }); 38 } 39 }, 40 }) 41 </script> 42 </body> 43 </html>
注：layer的参数：https://www.layui.com/doc/modules/layer.html
layer.js的下载：https://layer.layui.com/
下载后将图中标红文件放在自己创建的项目中即可
由于element-ui的弹窗都是模态的，而在工作中需要用到非模态的一些弹窗，因此找到了Layui的layer.js，这里的vue是通过cdn方式引入，并没有通过vue-cli脚手架进行搭建项目，在下一篇博客中会介绍使用在vue-cli脚手架搭建的项目中使用layer.js