ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改组件key

This commit is contained in:
龙运模 2024-03-29 14:55:43 +08:00
parent 92443e0c30
commit 3b1a8e62bd
2 changed files with 189 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
lib/components/decoration3/src/main.vue
View File

@ -2,25 +2,11 @@
<div class="dv-decoration-3" :ref="ref"> <div class="dv-decoration-3" :ref="ref">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`"> <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
<template <template v-for="(point, i) in points" :key="i">
v-for="(point, i) in points" <rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
> :width="pointSideLength" :height="pointSideLength">
<rect <animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
:key="i" :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
:fill="mergedColor[0]"
:x="point[0] - halfPointSideLength"
:y="point[1] - halfPointSideLength"
:width="pointSideLength"
:height="pointSideLength"
>
<animate
v-if="Math.random() > 0.6"
attributeName="fill"
:values="`${mergedColor.join(';')}`"
:dur="Math.random() + 1 + 's'"
:begin="Math.random() * 2"
repeatCount="indefinite"
/>
</rect> </rect>
</template> </template>
</svg> </svg>
@ -28,13 +14,13 @@
</template> </template>
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { deepMerge } from '@jiaminghi/charts/lib/util/index' import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration3', name: 'DvDecoration3',
mixins: [autoResize], mixins: [autoResize],
props: { props: {
@ -43,7 +29,7 @@ export default {
default: () => ([]) default: () => ([])
} }
}, },
data () { data() {
const pointSideLength = 7 const pointSideLength = 7
return { return {
@ -67,26 +53,26 @@ export default {
} }
}, },
watch: { watch: {
color () { color() {
const { mergeColor } = this const { mergeColor } = this
mergeColor() mergeColor()
} }
}, },
methods: { methods: {
afterAutoResizeMixinInit () { afterAutoResizeMixinInit() {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
}, },
calcSVGData () { calcSVGData() {
const { calcPointsPosition, calcScale } = this const { calcPointsPosition, calcScale } = this
calcPointsPosition() calcPointsPosition()
calcScale() calcScale()
}, },
calcPointsPosition () { calcPointsPosition() {
const { svgWH, rowNum, rowPoints } = this const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH const [w, h] = svgWH
@ -101,28 +87,28 @@ export default {
this.points = points.reduce((all, item) => [...all, ...item], []) this.points = points.reduce((all, item) => [...all, ...item], [])
}, },
calcScale () { calcScale() {
const { width, height, svgWH } = this const { width, height, svgWH } = this
const [w, h] = svgWH const [w, h] = svgWH
this.svgScale = [width / w, height / h] this.svgScale = [width / w, height / h]
}, },
onResize () { onResize() {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
}, },
mergeColor () { mergeColor() {
const { color, defaultColor } = this const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || []) this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
}, },
mounted () { mounted() {
const { mergeColor } = this const { mergeColor } = this
mergeColor() mergeColor()
} }
} }
</script> </script>

69
lib/components/decoration6/src/main.vue
View File

@ -1,37 +1,16 @@
<template> <template>
<div class="dv-decoration-6" :ref="ref"> <div class="dv-decoration-6" :ref="ref">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`"> <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
<template <template v-for="(point, i) in points" :key="i">
v-for="(point, i) in points" <rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth"
> :y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
<rect <animate attributeName="y"
:key="i"
:fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
:x="point[0] - halfRectWidth"
:y="point[1] - heights[i] / 2"
:width="rectWidth"
:height="heights[i]"
>
<animate
attributeName="y"
:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`" :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
:dur="`${randoms[i]}s`" :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
keyTimes="0;0.5;1" begin="0s" repeatCount="indefinite" />
calcMode="spline" <animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
keySplines="0.42,0,0.58,1;0.42,0,0.58,1" :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
begin="0s" begin="0s" repeatCount="indefinite" />
repeatCount="indefinite"
/>
<animate
attributeName="height"
:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
:dur="`${randoms[i]}s`"
keyTimes="0;0.5;1"
calcMode="spline"
keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
begin="0s"
repeatCount="indefinite"
/>
</rect> </rect>
</template> </template>
</svg> </svg>
@ -39,15 +18,15 @@
</template> </template>
<script> <script>
import autoResize from '../../../mixin/autoResize' import autoResize from '../../../mixin/autoResize'
import { randomExtend } from '../../../util' import { randomExtend } from '../../../util'
import { deepMerge } from '@jiaminghi/charts/lib/util/index' import { deepMerge } from '@jiaminghi/charts/lib/util/index'
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
export default { export default {
name: 'DvDecoration6', name: 'DvDecoration6',
mixins: [autoResize], mixins: [autoResize],
props: { props: {
@ -56,7 +35,7 @@ export default {
default: () => ([]) default: () => ([])
} }
}, },
data () { data() {
const rectWidth = 7 const rectWidth = 7
return { return {
@ -83,26 +62,26 @@ export default {
} }
}, },
watch: { watch: {
color () { color() {
const { mergeColor } = this const { mergeColor } = this
mergeColor() mergeColor()
} }
}, },
methods: { methods: {
afterAutoResizeMixinInit () { afterAutoResizeMixinInit() {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
}, },
calcSVGData () { calcSVGData() {
const { calcPointsPosition, calcScale } = this const { calcPointsPosition, calcScale } = this
calcPointsPosition() calcPointsPosition()
calcScale() calcScale()
}, },
calcPointsPosition () { calcPointsPosition() {
const { svgWH, rowNum, rowPoints } = this const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH const [w, h] = svgWH
@ -126,28 +105,28 @@ export default {
this.randoms = new Array(rowNum * rowPoints) this.randoms = new Array(rowNum * rowPoints)
.fill(0).map(foo => Math.random() + 1.5) .fill(0).map(foo => Math.random() + 1.5)
}, },
calcScale () { calcScale() {
const { width, height, svgWH } = this const { width, height, svgWH } = this
const [w, h] = svgWH const [w, h] = svgWH
this.svgScale = [width / w, height / h] this.svgScale = [width / w, height / h]
}, },
onResize () { onResize() {
const { calcSVGData } = this const { calcSVGData } = this
calcSVGData() calcSVGData()
}, },
mergeColor () { mergeColor() {
const { color, defaultColor } = this const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || []) this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
} }
}, },
mounted () { mounted() {
const { mergeColor } = this const { mergeColor } = this
mergeColor() mergeColor()
} }
} }
</script> </script>