@fmdevui/fm-dev/es/packages/core/layout/routerView/iframes.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, computed, nextTick, watch, resolveDirective, createElementBlock, openBlock, createElementVNode, Fragment, renderList, withDirectives, createVNode, TransitionGroup, withCtx, unref, vShow } from 'vue';
import { useRoute } from 'vue-router';
import '../../api/index.mjs';
import { getToken } from '../../api/utils/request.mjs';

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__ */ 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 = ref();
    const route = useRoute();
    const setIframeList = computed(() => {
      return props.list.filter((v) => v.meta?.isIframeOpen);
    });
    const getRoutePath = computed(() => {
      return route.path;
    });
    const closeIframeLoading = (val, item) => {
      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;
            };
          }
        });
      });
    };
    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
      }
    );
    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 = resolveDirective("loading");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(setIframeList.value, (v) => {
              return withDirectives((openBlock(), createElementBlock("div", {
                class: "w100",
                key: v.path,
                "element-loading-background": "white"
              }, [
                createVNode(TransitionGroup, { name: __props.name }, {
                  default: withCtx(() => [
                    withDirectives((openBlock(), createElementBlock("iframe", {
                      src: `${v.meta.isLink}${v.meta.isLink.indexOf("?") > 0 ? "&" : "?"}token=${unref(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)), [
                      [vShow, getRoutePath.value === v.path]
                    ])
                  ]),
                  _: 2
                  /* DYNAMIC */
                }, 1032, ["name"])
              ])), [
                [_directive_loading, v.meta.loading]
              ]);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ])
      ]);
    };
  }
});

export { _sfc_main as default };