vue中iframe加载慢，给它加loading效果

js框架：vue

ui框架：element

因为iframe加载慢，所以在它加载完成前添加loading效果，loading用的是element家的加载效果

<template>
  <div style="height:100%;overflow: auto;" v-loading="loading">
    <iframe ref="iframe" :src="src" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'https://www.baidu.com',
      loading: true,
    };
  },
  created() {

  },
  mounted() {
    const { iframe } = this.$refs;
    // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
    const that = this;
    if (iframe.attachEvent) {
      // IE
      iframe.attachEvent('onload', () => {
        that.stateChange();
      });
    } else {
      // 非IE
      iframe.onload = function () {
        that.stateChange();
      };
    }
  },
  methods: {
    stateChange() {
      this.loading = false;
    },
  },
};
</script>
<style scoped></style>