集中升级

project/dvui/components/AiSprite.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="AiSprite" :ref="ref"/>
+</template>
+
+<script>
+import * as spritejs from 'spritejs'
+
+export default {
+  name: "AiSprite",
+  props: {
+    width: {default: 400},
+    height: {default: 300},
+  },
+  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.init()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSprite {
+}
+</style>

project/dvui/layout/AiDvWrapper/AiDvWrapper.vue

@@ -23,7 +23,7 @@
           </div>
           <div class="headerCenter">
             <div class="headerZone">
-              <div id="fly" class="fly"/>
+              <ai-sprite width="600" height="90" class="fly" @init="initFly"/>
               <span>{{ title }}</span>
             </div>
           </div>
@@ -57,13 +57,13 @@
 import {fullScreenContainer} from '@jiaminghi/data-view'
 import Vue from "vue";
 import RightTopBorder from "./rightTopBorder";
-import {Arc, Scene} from 'spritejs'
+import AiSprite from "../../components/AiSprite";
 
 Vue.use(fullScreenContainer)
 
 export default {
   name: "AiDvWrapper",
-  components: {RightTopBorder},
+  components: {AiSprite, RightTopBorder},
   model: {
     prop: 'value',
     event: 'change'
@@ -124,45 +124,35 @@ export default {
         cfs.call(el)
       }
     },
-    initFly() {
+    initFly({layer, lib: {Arc}}) {
       const rand = (min, max) => min + (max - min) * Math.random()
-      const initScene = (count = 0) => {
-        const container = document.querySelector('#fly')
-        if (container) {
-          const scene = new Scene({container, width: 600, height: 90}),
-              layer = scene.layer()
-          const startFly = (p) => {
-            let scaleNum = rand(1, 3)
-            const pos = [rand(0, 600), 90 - rand(8, 50)]
-            p.attr({
-              pos,
-              scale: [scaleNum, scaleNum],
-              radius: 1,
-              fillColor: '#0aa5ff',
-              filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
-            })
-            p.animate([
-              pos,
-              {y: 0}
-            ], {
-              opacity: 0,
-              duration: rand(1, 1.5) * 1000,
-              iterations: Infinity,
-              easing: 'ease-out'
-            })
-            setTimeout(() => layer.append(p), rand(1, 5) * 1000)
-          }
-          //初始化标题萤火效果
-          let numP = 70;
-          for (let i = 0; i <= numP; i++) {
-            const p = new Arc()
-            startFly(p)
-          }
-        } else if (count == 20) {
-
-        } else setTimeout(() => initScene(++count), 500)
+      const startFly = (p) => {
+        let scaleNum = rand(1, 3)
+        const pos = [rand(0, 600), 90 - rand(8, 50)]
+        p.attr({
+          pos,
+          scale: [scaleNum, scaleNum],
+          radius: 1,
+          fillColor: '#0aa5ff',
+          filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
+        })
+        p.animate([
+          pos,
+          {y: 0}
+        ], {
+          opacity: 0,
+          duration: rand(1, 1.5) * 1000,
+          iterations: Infinity,
+          easing: 'ease-out'
+        })
+        setTimeout(() => layer.append(p), rand(1, 5) * 1000)
+      }
+      //初始化标题萤火效果
+      let numP = 70;
+      for (let i = 0; i <= numP; i++) {
+        const p = new Arc()
+        startFly(p)
       }
-      initScene()
     },
     handleSetting() {
       if (this.setting.timer) clearInterval(this.setting.timer)
@@ -184,9 +174,6 @@ export default {
       this.currentTime = this.$moment().format("YYYY/MM/DD HH:mm:ss")
     }, 1000)
   },
-  mounted() {
-    this.initFly()
-  }
 }
 </script>
 
@@ -363,11 +350,6 @@ export default {
           left: 50%;
           transform: translateX(-50%);
           z-index: 3;
-
-          & > div {
-            width: 0;
-            box-shadow: 0 0 1px 1px #0aa5ff;
-          }
         }
       }
     }