@livescreen/vue

@livescreen/vue

Vue 声明式UI的方式使用meta2d

Features

• vue响应式更新
• vue事件触发
• vue指令
• vue事件修饰符
• vue数据双向绑定

[!NOTE] 此库目前暂不稳定，在1.0发布之前可能会更改相关配置，且没有进行完整的测试，请自行承担风险，感谢支持

example

<script setup>
import {Meta2dComponent} from "@livescreen/vue"
import {onMounted, reactive} from "vue";

const circleData = reactive({
  background:"#1376e4"
})

onMounted(()=>{
  setTimeout(()=>{
    circleData.background = '#00ff00'
    setTimeout(()=>{
      circleData.background = '#ff0000'
    },4000)
  },4000)
})

const data = reactive(new Array(10).fill(0).map(()=>({
  visible:true
})))
</script>

<template>
  <div class="main">
    <Meta2dComponent style="width: 100%;height: 100%">
      <template v-for="row in 20" :key="row">
        <template v-for="(i,index) in data" :key="index">
          <circle
              :text="index"
              :x="(row - 1) * 20 + 100"
              :y="(index - 1) * 20 + 100"
              :width="20"
              :height="20"
              :background="circleData.background"
              @click="()=>i.visible = !i.visible"
              v-if="i.visible"
          >
          </circle>
        </template>
      </template>
    </Meta2dComponent>
  </div>
</template>