detailsDia.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <el-dialog :title="title" append-to-body class="iframe" :visible.sync="dialog.details" width="500px">
  3. <iframe :id="id" name="google_ads_frame2" frameborder="0" width="100%" height="300px" :src="iframeSrc" marginwidth="0" marginheight="0" vspace="0"
  4. hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
  5. </el-dialog>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. id: 'google_ads_frame2' + new Date().getTime()
  12. }
  13. },
  14. props: {
  15. iframeSrc: {
  16. type: String,
  17. default: ""
  18. },
  19. title: {
  20. type: String,
  21. default: "详情"
  22. },
  23. dialog: {
  24. type: Object,
  25. default: function () {
  26. return {
  27. details: false
  28. }
  29. }
  30. },
  31. setData: {
  32. type: [Array, String],
  33. default: function () {
  34. return []
  35. }
  36. }
  37. },
  38. methods: {
  39. setMess() {
  40. this.$nextTick(_ => {
  41. let iframe = document.getElementById(this.id)
  42. iframe.onload = () => {
  43. let arr = this.setData.map(i => ({
  44. key: i.Key,
  45. name: i.Name,
  46. type: i.Type
  47. }))
  48. iframe.contentWindow.postMessage(arr, "*")
  49. }
  50. })
  51. }
  52. },
  53. watch: {
  54. dialog: {
  55. deep: true,
  56. handler: function () {
  57. if (this.dialog.details) {
  58. this.setMess()
  59. }
  60. }
  61. }
  62. }
  63. }
  64. </script>
  65. <style lang="less" scoped>
  66. #google_ads_frame2 {
  67. height: 300px;
  68. overflow: auto;
  69. }
  70. </style>