videoInfo4.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div id="app">
  3. <iframe
  4. style="border:none"
  5. :width="searchTableWidth"
  6. :height="searchTableHeight"
  7. v-bind:src="reportUrl"
  8. ></iframe>
  9. </div>
  10. </template>
  11. <script>
  12. import Vue from 'vue'
  13. export default {
  14. methods: {
  15. widthHeight() {
  16. this.searchTableHeight = window.innerHeight -180;
  17. this.searchTableWidth = window.innerWidth - 230
  18. },
  19. },
  20. data() {
  21. return {
  22. reportUrl: 'https://v.douyin.com/ieVbKAK/',
  23. searchTableHeight: 0,
  24. searchTableWidth: 0
  25. }
  26. },
  27. mounted() {
  28. window.onresize = () => {
  29. this.widthHeight(); // 自适应高宽度
  30. };
  31. this.$nextTick(function () {
  32. this.widthHeight();
  33. });
  34. },
  35. created() {
  36. // 从路由里动态获取 url地址 具体地址看libs下util.js里的 backendMenuToRoute 方法
  37. this.reportUrl = 'https://v.douyin.com/ieVbKAK/'
  38. },
  39. watch: {
  40. '$route': function () {
  41. // 监听路由变化
  42. this.reportUrl = 'https://v.douyin.com/ieVbKAK/'
  43. }
  44. }
  45. }
  46. </script>