<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#F5F5DC' }"></div>
  <jsv-focus-block autoFocus :onAction="{ onKeyDown }"></jsv-focus-block>
  <div
    :style="{
      width: 1280,
      height: 100,
      lineHeight: 100,
      textAlign: 'center',
      fontSize: 40,
      color: '#000000',
    }"
  >
    按OK键触发动画
  </div>
  <bounce
    ref="bounceRef"
    :src="iLeftSnake"
    :layout="{
      width: 320,
      height: 320,
      top: 400,
      left: 400,
    }"
  />
</template>

<script setup>
import Bounce from "./Bounce.vue";
import { shallowRef } from "vue";

const bounceRef = shallowRef(null);
let iLeftSnake =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Bounce/App/snake_left.png?md5=e0310d4ba1c74899899ca365a8b16385";

function onKeyDown(ev) {
  if (ev.keyCode == 13) {
    bounceRef.value.start(-400, -400, 7);
    return true;
  }
  return false;
}
</script>
