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

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

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

<template>
  <div>
    <el-button @click="b">弹出</el-button>
    <div id="box">
      <h1>这还是测试</h1>
      <!-- element-ui的组件 -->
      <el-button>按钮</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      b(){
        layer.open({
            type: 1,
          title:['Headers','background-color: #009F95;font-size: 20px;background:rgba(0,0,255,0.5);text-align:center;border:none;'],
            area: ['400px', '100%'],
          offset:'rt',
            shade: false,
            content:$("#box"),
          cancel:(index,layero) => {
            console.log(index)
            if(confirm('确定要关闭么')){
              layer.close(index)
            }
            return false;
          }
        })
      },
    },
  }
</script>
<style type="text/css">
  #box {
    display: none;
    float: left;
  }

  .layui-layer-content {
    background-color: #009F95;
    opacity: 0.5;
  }
</style>

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