pco/sp-admin/sa-frame/nav/nav-view-vessel.vue

<template>
  <div class="view-vessel">
    <div class="a-view" v-for="tab in $root.viewList" :key="tab.id"
         :class="tab == $root.nativeTab ? 'a-view-native' : null">
      <!-- vue视图 -->
      <template v-if="tab.view">
        <component :is="tab.view" class="vue-com-view" v-if="tab.isNeedLoad"></component>
      </template>
      <!-- iframe视图 -->
      <template v-else>
        <iframe :src="tab.url" :id=" 'iframe-' + tab.id " v-if="tab.isNeedLoad" @load="onloadIframe(tab.id)"></iframe>
      </template>
    </div>
    <!-- tab被拖拽时的遮罩（下托拽：悬浮打开） -->
    <div class="shade-fox" v-if="$root.isDrag"
         @dragover="$event.preventDefault();"
         @drop="$event.preventDefault(); $event.stopPropagation(); $root.xfTab($root.dragTab); $root.closeTab($root.dragTab);">
      <span style="font-size: 24px;">拖拽至此：悬浮打开</span>
    </div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {}
  },
  methods: {
    // iframe加载完毕后清除其背景 loading 图标
    onloadIframe: function (iframeId) {
      // console.log('iframeId', iframeId);
      var iframe = document.querySelector('#iframe-' + iframeId);
      if (iframe != null) {
        iframe.parentElement.style.backgroundImage = 'none';
      }
    },
  },
  created() {

  }
}
</script>

<style scoped>

.view-vessel {
  height: 100%;
  position: relative;
  border: 0px #000 solid;
}

.a-view {
  width: 100%;
  height: 100%;
  background-color: #EEE;
  background: url(../index/admin-loading.gif) no-repeat center 50%;
  position: absolute;
}

.a-view {
  opacity: 0;
  transition: all 0.2s;
}

.a-view-native {
  z-index: 100000;
  opacity: 1;
}

.a-view > iframe {
  width: 100%;
  height: 100%;
  border: 0px #000 solid;
}

.a-view > .vue-com-view {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #EEE;
}

/* .iframe-no-scroll{width: calc(100% + 22px); } */

</style>