vue中使用layer.open打开组件

layer参数说明

layer.open({
    // 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
    type: 1,
    title: "标题",
    // 当type: 2时就是url
    content: "内容/url",
    // 宽高：如果是100%就是满屏
    area: ['733px', '450px'],
    // 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推
    btn: ['按钮1', '按钮2'],
    // 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0
    closeBtn: 1,
    // 遮罩：默认：0.3透明度的黑色背景（'#000'）
    shade: 0.3,
    // 是否点击遮罩关闭：默认：false
    shadeClose: false,
    // 自动关闭所需毫秒：默认：0不会自动关闭
    time: 0,
    // 最大最小化：默认：false
    maxmin: false,
    // 固定：默认：true
    fixed: true,
    // 是否允许拉伸：默认：true
    resize: true,
    // 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突
    zIndex: 19891014,
    // 层弹出后的成功回调方法：layero前层DOM，index当前层索引
    success: function(layero, index){
    },
    // 第一个按钮事件，也可以叫btn1
    yes: function (index, layero) {
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
    cancel: function(index, layero){
        if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            layer.close(index);
        }
        return false;
    },
    // 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
    end: function(){
    },
    // 最大化后触发的回调：携带一个参数，即当前层DOM
    full: function(layero){
    },
    // 最小化后触发的回调：携带一个参数，即当前层DOM
    min: function(layero){
    },
    // 还原后触发的回调：携带一个参数，即当前层DOM
    restore: function(layero){
    },
});

对应组件

<template>
    <div class="cs">
        <--对应页面展示-->
    </div>
</template>
<script>

</script>

router文件中的index.js中写入对应路径

{
    path: '/index',
    name: 'index',
    component: resolve => {
      require(['@/components/dome/index.vue'], resolve);
    }
},

对应点击事件触发方法

    if (!document.querySelector('.open-credit-class')) {
        this.bidFileLoading = true;
        let _this = this;
        const contentPath = `${window.location.origin}/#/creditDialog`
        _this.$layer.open({            
          type: 2,
          skin: 'open-credit-class',
          title: '模拟组件',
          shadeClose: false,
          shade: 0,
          offset: 'rb',
          area: ['1200px', '800px'],
          maxmin: true,
          content: contentPath,
          moveOut: true,
          moveEnd: function (layero) {
            const w = parseInt(layero[0].style.width);
            const h = parseInt(layero[0].style.height);

            if (parseInt(layero[0].style.top) < 0) {
              layero[0].style.top = '0px';
            }
            if (parseInt(layero[0].style.left) < -w + 200) {
              layero[0].style.left = -w + 160 + 'px';
            }
            if (parseInt(layero[0].style.left) > w) {
              layero[0].style.left = w + 'px';
            }
            if (parseInt(layero[0].style.top) > h) {
              layero[0].style.top = h + 100 + 'px';
            }
          },
          end: () => {
            console.log('关闭组件');     
            // 可以在此处处理组件关闭时的逻辑
          }
        })
      } else {
        this.isClick = true;
      }