git IMage

src/components/FireWorkList.vue

@@ -15,64 +15,75 @@
 
 <script setup>
 import { ref } from 'vue'
-  import FireWork from './FireWork.vue'
-  const colorList = ['#f5222d', '#d4380d', '#d46b08', '#d48806', '#d4b106', '#7cb305', '#389e0d', '#08979c', '#096dd9', '#531dab']
-  const random = (n, m) => parseInt(Math.random()*(n-m+1)+m)
-  
-  const props = defineProps({
-    center: {
-      type: Object,
-      required: true,
-    },
-    raduis: {
-      type: Number,
-      required: true,
-    },
-  })
+import FireWork from './FireWork.vue'
+const colorList = [
+  '#f5222d',
+  '#d4380d',
+  '#d46b08',
+  '#d48806',
+  '#d4b106',
+  '#7cb305',
+  '#389e0d',
+  '#08979c',
+  '#096dd9',
+  '#531dab'
+]
+const random = (n, m) => parseInt(Math.random() * (n - m + 1) + m)
 
-  const fireNum = ref(12)
-  const isFinished = ref(true)
+const props = defineProps({
+  center: {
+    type: Object,
+    required: true
+  },
+  raduis: {
+    type: Number,
+    required: true
+  }
+})
 
-  const calcLeft = (inx) => {
-    let start, end;
-    if (inx < fireNum.value / 2) {
-      start = props.center.x - props.raduis - 150  // 150 随便写的
-      end = props.center.x
-    } else {
-      start = props.center.x
-      end = props.center.x + props.raduis
-    }
+const fireNum = ref(12)
+const isFinished = ref(true)
 
-    return `${random(start, end)}px`
+const calcLeft = (inx) => {
+  let start, end
+  if (inx < fireNum.value / 2) {
+    start = props.center.x - props.raduis - 150 // 150 随便写的
+    end = props.center.x
+  } else {
+    start = props.center.x
+    end = props.center.x + props.raduis
   }
 
-  const calcTop = (inx) => {
-    let start, end;
-    start = props.center.y - props.raduis - 150  // 50 随便写的
-    end = props.center.y - props.raduis
+  return `${random(start, end)}px`
+}
 
-    return `${random(start, end)}px`
-  }
+const calcTop = (inx) => {
+  let start, end
+  start = props.center.y - props.raduis - 150 // 50 随便写的
+  end = props.center.y - props.raduis
 
-  const clacScale = () => {
-    const r = Math.random();
+  return `${random(start, end)}px`
+}
 
-    if (r < 0.1) return 0.1
-    if (r > 0.5) return 0.5
-    return r
-  }
+const clacScale = () => {
+  const r = Math.random()
 
-  const handleEnd = () => {
-    if (isFinished.value) return
-    isFinished.value = true
+  if (r < 0.1) return 0.1
+  if (r > 0.5) return 0.5
+  return r
+}
 
-    const t = setTimeout(() => {
-      fireNum.value = random(10, 20)
-      clearTimeout(t)
-    }, 0)
-  }
+const handleEnd = () => {
+  if (isFinished.value) return
+  isFinished.value = true
+
+  const t = setTimeout(() => {
+    fireNum.value = random(10, 20)
+    clearTimeout(t)
+  }, 0)
+}
 
-  defineExpose({
-    toggle: () => isFinished.value = false
-  })
+defineExpose({
+  toggle: () => (isFinished.value = false)
+})
 </script>