client-base-v5/src/widget/FrameWindow.vue

<template>
  <!-- 状态详情 -->
  <div>
    <div
      v-if="showFrame"
      class="frame-window"
    >
      <div class="frame-window-title">
        {{ title }}
        <img
          class="close-btn"
          src="/static/assets/client-base-v4/image/close.png"
          @click="close"
        />
      </div>

      <div class="frame-window-content">
        <iframe
          id="ifr_diagnose"
          :src="frameSrc"
          class="frame-window-content-iframe"
        />
      </div>
    </div>
  </div>
</template>


<script>

export default {

  components: {

  },
  props: [],
  emits: ['close'],

  data: function () {
    return {
      title: null,
      frameSrc: null,
      showFrame: false,
    };
  },

  mounted: function(){
    var _self = this;
    window.addEventListener('message', this.onMessage);
  },

  beforeUnmount : function() {
    // 在组件生命周期结束的时候销毁。
    window.removeEventListener('message', this.onMessage, false);
  },

  methods: {
    /**
         * 打开一个网址
         * @param src 待打开的网址
         * @param title 标题
         */
    open: function (src, title) {
      this.title = title;
      this.frameSrc = src;
      this.showFrame = true;
    },

    close: function () {
      this.showFrame = false;
      this.$emit('close');
    },

    onMessage: function(e){
      var _self = this;
      if(e.data.cmd === 'close'){
        _self.close();
      }
    },
  },
};
</script>


<style scoped>
.frame-window {
    position: fixed;
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
}

.frame-window .frame-window-title {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 30px;
    background: #f1f1f1;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 16px;
    font-weight: bold;
}

.frame-window .frame-window-title .close-btn {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.frame-window .frame-window-content {
    position: fixed;
    top: 30px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.frame-window-content-iframe {
    width: 100%;
    height: 100%;
}
</style>