<template>
  <div class="Home">
    <div class="btn" @click="btnFu">开始动画</div>
    <iframe id="iframe" src="/three/index.html" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      iframeDom: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    btnFu() {
      // 调用 iframe 的开始动画
      this.iframeDom.contentWindow.stareMove(true);
    },
  },
  created() {},
  mounted() {
    this.iframeDom = document.querySelector("#iframe");
    // 点击图片
    window.clickObject = (val) => {
      console.log('000', val);
    };
    // 鼠标移入
    window.hoverObject = (val) => {
      // console.log(111, val);
    };
    // 鼠标移出
    window.mouseoutObject = (val) => {
      // console.log(222, val);
    };
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.Home {
  width: 100%;
  height: 100%;
  iframe {
    width: 100%;
    height: 100%;
  }
  .btn {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: pointer;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
