index.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面,请稍候!">
  3. <iframe
  4. :id="iframeId"
  5. style="width: 100%; height: 100%"
  6. :src="src"
  7. frameborder="no"
  8. ></iframe>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. props: {
  14. src: {
  15. type: String,
  16. default: "/"
  17. },
  18. iframeId: {
  19. type: String
  20. }
  21. },
  22. data() {
  23. return {
  24. loading: false,
  25. height: document.documentElement.clientHeight - 94.5 + "px;"
  26. };
  27. },
  28. mounted() {
  29. var _this = this;
  30. const iframeId = ("#" + this.iframeId).replace(/\//g, "\\/");
  31. const iframe = document.querySelector(iframeId);
  32. // iframe页面loading控制
  33. if (iframe.attachEvent) {
  34. this.loading = true;
  35. iframe.attachEvent("onload", function () {
  36. _this.loading = false;
  37. });
  38. } else {
  39. this.loading = true;
  40. iframe.onload = function () {
  41. _this.loading = false;
  42. };
  43. }
  44. }
  45. };
  46. </script>