Vue中使用layer.js做非模态弹窗(一) 

 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

posted @ 2020-08-15 22:10  yw3692582  阅读(1253)  评论(0)  编辑  收藏  举报