Vue(vue-cli脚手架)中使用layer.js做非模态弹窗(二) 

1     <!-- 首先将jquery和layer.js放在index.html中 -->
2     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
3     <script src="static/layer/layer.js" type="text/javascript" charset="utf-8"></script>

　　在所要用的.vue文件中直接使用即可

 1 <template>
 2   <div>
 3     <el-button @click="b">弹出</el-button>
 4     <div id="box">
 5       <h1>这还是测试</h1>
 6       <!-- element-ui的组件 -->
 7       <el-button>按钮</el-button>
 8     </div>
 9   </div>
10 </template>
11 <script>
12   export default {
13     data() {
14       return {
15 
16       }
17     },
18     methods: {
19       b(){
20         layer.open({
21             type: 1,
22           title:['Headers','background-color: #009F95;font-size: 20px;background:rgba(0,0,255,0.5);text-align:center;border:none;'],
23             area: ['400px', '100%'],
24           offset:'rt',
25             shade: false,
26             content:$("#box"),
27           cancel:(index,layero) => {
28             console.log(index)
29             if(confirm('确定要关闭么')){
30               layer.close(index)
31             }
32             return false;
33           }
34         })
35       },
36     },
37   }
38 </script>
39 <style type="text/css">
40   #box {
41     display: none;
42     float: left;
43   }
44 
45   .layui-layer-content {
46     background-color: #009F95;
47     opacity: 0.5;
48   }
49 </style>

注：关于layer.js的的下载和参数设置请移步上一篇博客

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