【摘要】 Vue中使用layer.js做非模态弹窗(一)考必过小编为大家整理了关于Vue中使用layer.js做非模态弹窗(一)的信息，希望可以帮助到大家！
Vue中使用layer.js做非模态弹窗(一)
标签：遮罩 测试 lib false tip ref span color code
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 <p id="app">
15 <button @click="b">点击</button>
16 </p>
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
Vue中使用layer.js做非模态弹窗(一)
标签：遮罩 测试 lib false tip ref span color code
以上就是Vue中使用layer.js做非模态弹窗(一)的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！