index.vue 620 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div class="page-iframe" v-loading="loading" element-loading-text="拼命加载中">
  3. <iframe :src="url" frameborder="0"></iframe>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. loading: false,
  11. url: ""
  12. };
  13. },
  14. watch: {
  15. $route: {
  16. handler({ meta }) {
  17. this.url = meta.iframeUrl;
  18. },
  19. immediate: true
  20. }
  21. },
  22. mounted() {
  23. const iframe = this.$el.querySelector("iframe");
  24. this.loading = true;
  25. iframe.onload = () => {
  26. this.loading = false;
  27. };
  28. }
  29. };
  30. </script>
  31. <style lang="scss" scoped>
  32. .page-iframe {
  33. iframe {
  34. height: 100%;
  35. width: 100%;
  36. }
  37. }
  38. </style>