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