<template>
  <div id="layout-root">
    <div
      class="content-font"
      :style="{ width: 70, height: 25, backgroundColor: 'rgba(0, 255, 0, 1)' }"
      @load.jsvoption="onJsvEventCallback"
    >
      坐标未设
    </div>
    <!-- <div class="content-font" :style="{ top: 0, left: 75, backgroundColor: 'rgba(0, 255, 0, 1)' }">宽高未设</div> -->
    <div
      class="content-font"
      :style="{
        top: 30 * 1,
        left: 0,
        width: 70,
        height: 25,
        backgroundColor: 'rgba(0, 200, 0, 1)',
        visibility: 'hidden',
      }"
    >
      (X)不可视
    </div>
    <div
      class="content-font"
      :style="{
        top: 30 * 1,
        left: 75,
        width: 70,
        height: 25,
        backgroundColor: 'rgba(0, 200, 0, 1)',
        visibility: 'visible',
      }"
    >
      可视属性
    </div>
    <div
      v-show="vShow"
      class="content-font"
      :style="{
        top: 30 * 2,
        left: 75,
        width: 70,
        height: 25,
        backgroundColor: 'rgba(0, 200, 0, 1)',
        visibility: 'visible',
      }"
    >
      v-show
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

// v-show 控制
let vShow = ref(false);
let loopVShow = setInterval(() => {
  vShow.value = !vShow.value;
}, 1000);

onUnmounted(() => {
  clearInterval(loopVShow);
});

function onJsvEventCallback() {
  console.error('Event jsview options example of writing, never be called.');
}

</script>

<style>
@import "../FontStyle.css";
</style>