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的的下载和参数设置请移步上一篇博客