<template>
  <div class="demo-model">
    <iframe :src="src"  ref="demoModel" id="demoModel" frameborder="0" class="view-iframe"></iframe>
  </div>
</template>

<script>
  export default {
    props: ["src"],
    data() {
      return {
        iframeWin: null
      }
    },
    mounted() {
      // let mapFrame = this.$refs.demoModel
      // let that = this
      // if (mapFrame.attachEvent) {
      //   // 兼容浏览器判断 // iframe的加载完成函数
      //     mapFrame.attachEvent('onload', function () {
      //       that.iframeWin = mapFrame.contentWindow
      //     })
      // } else {
      //   mapFrame.onload = function () {
      //     that.iframeWin = mapFrame.contentWindow
      //   }
      // }
    },
    methods: {
      postMsg(param) {
        this.iframeWin.postMessage(param, '*')
      }
    }
  }
</script>

<style scoped lang="scss">
.demo-model {
  width: 360px;
  height: 730px;
  background-image: url("/img/phone.png");
  background-repeat: no-repeat;
  background-position: center 0;
  display: flex;
  overflow: hidden;
  // top: 80px;
  // right: 20px;
  justify-content: center;
  align-items: center;
  .view-iframe {
    position: absolute;
    width: 326px;
    height: 570px;
  }
}
</style>
