@fmdevui/fm-dev/lib/packages/core/layout/routerView/iframes.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vueRouter = require('vue-router');
require('../../api/index.js');
var request = require('../../api/utils/request.js');

const _hoisted_1 = { class: "layout-padding layout-padding-unset layout-iframe" };
const _hoisted_2 = { class: "layout-padding-auto layout-padding-view" };
const _hoisted_3 = ["src", "data-url"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "iframes",
  props: {
    // 刷新 iframe
    refreshKey: {
      type: String,
      default: () => ""
    },
    // 过渡动画 name
    name: {
      type: String,
      default: () => "slide-right"
    },
    // iframe 列表
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(__props) {
    const props = __props;
    const iframeRef = vue.ref();
    const route = vueRouter.useRoute();
    const setIframeList = vue.computed(() => {
      return props.list.filter((v) => v.meta?.isIframeOpen);
    });
    const getRoutePath = vue.computed(() => {
      return route.path;
    });
    const closeIframeLoading = (val, item) => {
      vue.nextTick(() => {
        if (!iframeRef.value) return false;
        iframeRef.value.forEach((v) => {
          if (v.dataset.url === val) {
            v.onload = () => {
              if (item.meta?.isIframeOpen && item.meta.loading) item.meta.loading = false;
            };
          }
        });
      });
    };
    vue.watch(
      () => route.fullPath,
      (val) => {
        const item = props.list.find((v) => v.path === val);
        if (!item) return false;
        if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
        closeIframeLoading(val, item);
      },
      {
        immediate: true
      }
    );
    vue.watch(
      () => props.refreshKey,
      () => {
        const item = props.list.find((v) => v.path === route.path);
        if (!item) return false;
        if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
        setTimeout(() => {
          item.meta.isIframeOpen = true;
          item.meta.loading = true;
          closeIframeLoading(route.fullPath, item);
        });
      },
      {
        deep: true
      }
    );
    return (_ctx, _cache) => {
      const _directive_loading = vue.resolveDirective("loading");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(setIframeList.value, (v) => {
              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                class: "w100",
                key: v.path,
                "element-loading-background": "white"
              }, [
                vue.createVNode(vue.TransitionGroup, { name: __props.name }, {
                  default: vue.withCtx(() => [
                    vue.withDirectives((vue.openBlock(), vue.createElementBlock("iframe", {
                      src: `${v.meta.isLink}${v.meta.isLink.indexOf("?") > 0 ? "&" : "?"}token=${vue.unref(request.getToken)()}`,
                      key: v.path,
                      frameborder: "0",
                      height: "100%",
                      width: "100%",
                      style: { "position": "absolute" },
                      "data-url": v.path,
                      ref_for: true,
                      ref_key: "iframeRef",
                      ref: iframeRef
                    }, null, 8, _hoisted_3)), [
                      [vue.vShow, getRoutePath.value === v.path]
                    ])
                  ]),
                  _: 2
                  /* DYNAMIC */
                }, 1032, ["name"])
              ])), [
                [_directive_loading, v.meta.loading]
              ]);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ])
      ]);
    };
  }
});

exports.default = _sfc_main;