dvcp_v2_webapp/project/dvui/components/AiSprite.vue

<template>
  <section class="AiSprite" :ref="ref"/>
</template>

<script>
import * as spritejs from 'spritejs'

export default {
  name: "AiSprite",
  props: {
    width: {default: 400},
    height: {default: 300},
    is3D: Boolean
  },
  data() {
    return {
      ref: ""
    }
  },
  methods: {
    init(count = 0) {
      const container = this.$refs[this.ref]
      if (container) {
        let loadTasks = []
        let {width, height} = this.$props
        if (this.is3D) {
          loadTasks.push(this.$injectLib("https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"))
        }
        Promise.all(loadTasks).then(() => {
          const scene = new spritejs.Scene({container, width, height, ...this.$attrs}),
              layer = scene.layer()
          /**
           * layer 图层
           * lib spritejs的依赖库
           */
          this.$emit("init", {layer, lib: spritejs})
        })
      } else if (count == 20) {
        console.log(this.$refs)
      } else setTimeout(() => this.init(++count), 500)
    }
  },
  created() {
    this.ref = "AiSprite_" + new Date().getTime()
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.AiSprite {
}
</style>