单独构建大屏ui库,避免引入混乱

ui/dv/AiSprite.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="AiSprite" :ref="ref"/>
+</template>
+
+<script>
+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 {width, height} = this.$props
+        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.$injectLib("https://cdn.cunwuyun.cn/spritejs/spritejs.min.js", () => {
+      if (this.is3D) {
+        this.$injectLib("https://cdn.cunwuyun.cn/spritejs/sprite-extend-3d.js", () => {
+          this.init()
+        })
+      } else this.init()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSprite {
+}
+</style>