优化效果：
因为iframe加载缓慢，所以在它加载完成前添加loading效果，loading用的是element的加载效果。
实现代码：
<template>
<div class="vesselBox" v-loading="loading">
<iframe ref="Iframe" src="https://echarts.apache.org/examples/zh/index.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
loading: false, //默认不显示loading
};
},
mounted() {
this.iframeLoad();
},
methods: {
// 调用方法
iframeLoad() {
this.loading = true;
const iframe = this.$refs.Iframe;
// 兼容处理
if (iframe.attachEvent) {
// IE
iframe.attachEvent("onload", () => {
this.loading = false;
});
} else {
// 非IE
iframe.onload = () => {
this.loading = false;
};
}
},
},
};
</script>
<style scoped>
.vesselBox {
height: 100%;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79396.html
