xiaoshi_system/src/utils/model/iframe/index.vue

<template>
  <div class="myIframe" v-loading="loadLoading" ref="myIframe">
    <iframe ref="iframe" :src="src" v-bind="$attrs" height="100%" width="100%"></iframe>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    src:{
        default:''
    }
  },
  data() {
    return {
        loadLoading:false
    };
  },
  watch: {
    src(){
        this.loadIframe()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.loadIframe()
  },
  methods: {
    loadIframe(){
        if(!this.src){
            return
        }
        var that = this
        this.$nextTick(()=>{
            var a = that.$refs.iframe
            a.onload = function() {
                that.loadLoading = false
            };
            if(a.contentDocument.readyState == 'complete'){
                that.loadLoading = false
            }
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.myIframe{
    width: 100%; 
    height: 100%; 
}
</style>