<template>
    <div id="ifmPageContrainer">
        <div style="position: absolute;top:0;bottom:0;left:0;right:0;box-sizing: border-box;"
             v-loading="loading"
             element-loading-text="正在加载，请稍后..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.6)"
             element-loading-custom-class="ifmPage-load">
            <iframe :src="url" style="height:100%;width:100%;" frameborder="0" :class="{'show-iframe':showIframe}"
                    @load="onLoad"></iframe>
            <!--             element-loading-text="页面君正在快马加鞭的赶过来~ φ(≧ω≦*)♪"-->
        </div>
    </div>
</template>

export default {
name: "alive-iframe",
props: {
iframeUrl: ""
},
watch: {
iframeUrl() {
this.loadUrl();
}
},
data() {
return {
url: "",
showIframe: false,
loading: true
}
},
created() {
this.loadUrl();
},
methods: {
onLoad() {
this.loading = false;
this.showIframe = true;
},
loadUrl(){
if(this.menuUrl){
if(this.menuUrl.indexOf("http://") > -1 || this.menuUrl.indexOf("https://") > -1){
this.url = this.menuUrl;
}else{
this.url = (this.CTX + "/" + this.menuUrl);
}
}else{
this.url = "";
}
}
},
}
<script>
</script>

<style scoped lang="scss">
#ifmPageContrainer ::v-deep {
  .ifmPage-load {
    .el-loading-spinner {
      .el-loading-text {
        font-size: 16px;
      }

      .el-icon-loading {
        font-size: 22px;
      }
    }
  }
}

iframe {
  transition: all 0.25s;
  opacity: 0;
  transform: scale(0.98);
}

iframe.show-iframe {
  opacity: 1;
  transform: scale(1);
}
</style>