修改组件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

View File

@ -2,25 +2,11 @@
<div class="dv-decoration-3" :ref="ref">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
<template
v-for="(point, i) in points"
>
<rect
:key="i"
: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"
/>
<template v-for="(point, i) in points" :key="i">
<rect :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>
</template>
</svg>
@ -28,101 +14,101 @@
</template>
<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 {
name: 'DvDecoration3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const pointSideLength = 7
export default {
name: 'DvDecoration3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data() {
const pointSideLength = 7
return {
ref: 'decoration-3',
return {
ref: 'decoration-3',
svgWH: [300, 35],
svgWH: [300, 35],
svgScale: [1, 1],
svgScale: [1, 1],
rowNum: 2,
rowPoints: 25,
rowNum: 2,
rowPoints: 25,
pointSideLength,
halfPointSideLength: pointSideLength / 2,
pointSideLength,
halfPointSideLength: pointSideLength / 2,
points: [],
points: [],
defaultColor: ['#7acaec', 'transparent'],
defaultColor: ['#7acaec', 'transparent'],
mergedColor: []
}
},
watch: {
color () {
mergedColor: []
}
},
watch: {
color() {
const { mergeColor } = this
mergeColor()
}
},
methods: {
afterAutoResizeMixinInit() {
const { calcSVGData } = this
calcSVGData()
},
calcSVGData() {
const { calcPointsPosition, calcScale } = this
calcPointsPosition()
calcScale()
},
calcPointsPosition() {
const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH
const horizontalGap = w / (rowPoints + 1)
const verticalGap = h / (rowNum + 1)
let points = new Array(rowNum).fill(0).map((foo, i) =>
new Array(rowPoints).fill(0).map((foo, j) => [
horizontalGap * (j + 1), verticalGap * (i + 1)
]))
this.points = points.reduce((all, item) => [...all, ...item], [])
},
calcScale() {
const { width, height, svgWH } = this
const [w, h] = svgWH
this.svgScale = [width / w, height / h]
},
onResize() {
const { calcSVGData } = this
calcSVGData()
},
mergeColor() {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted() {
const { mergeColor } = this
mergeColor()
}
},
methods: {
afterAutoResizeMixinInit () {
const { calcSVGData } = this
calcSVGData()
},
calcSVGData () {
const { calcPointsPosition, calcScale } = this
calcPointsPosition()
calcScale()
},
calcPointsPosition () {
const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH
const horizontalGap = w / (rowPoints + 1)
const verticalGap = h / (rowNum + 1)
let points = new Array(rowNum).fill(0).map((foo, i) =>
new Array(rowPoints).fill(0).map((foo, j) => [
horizontalGap * (j + 1), verticalGap * (i + 1)
]))
this.points = points.reduce((all, item) => [...all, ...item], [])
},
calcScale () {
const { width, height, svgWH } = this
const [w, h] = svgWH
this.svgScale = [width / w, height / h]
},
onResize () {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>

View File

@ -1,37 +1,16 @@
<template>
<div class="dv-decoration-6" :ref="ref">
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
<template
v-for="(point, i) in points"
>
<rect
: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"
<template v-for="(point, i) in points" :key="i">
<rect :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}`"
: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"
/>
<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"
/>
: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" />
<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>
</template>
</svg>
@ -39,115 +18,115 @@
</template>
<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 {
name: 'DvDecoration6',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data () {
const rectWidth = 7
export default {
name: 'DvDecoration6',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => ([])
}
},
data() {
const rectWidth = 7
return {
ref: 'decoration-6',
return {
ref: 'decoration-6',
svgWH: [300, 35],
svgWH: [300, 35],
svgScale: [1, 1],
svgScale: [1, 1],
rowNum: 1,
rowPoints: 40,
rowNum: 1,
rowPoints: 40,
rectWidth,
halfRectWidth: rectWidth / 2,
rectWidth,
halfRectWidth: rectWidth / 2,
points: [],
heights: [],
minHeights: [],
randoms: [],
points: [],
heights: [],
minHeights: [],
randoms: [],
defaultColor: ['#7acaec', '#7acaec'],
defaultColor: ['#7acaec', '#7acaec'],
mergedColor: []
}
},
watch: {
color () {
mergedColor: []
}
},
watch: {
color() {
const { mergeColor } = this
mergeColor()
}
},
methods: {
afterAutoResizeMixinInit() {
const { calcSVGData } = this
calcSVGData()
},
calcSVGData() {
const { calcPointsPosition, calcScale } = this
calcPointsPosition()
calcScale()
},
calcPointsPosition() {
const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH
const horizontalGap = w / (rowPoints + 1)
const verticalGap = h / (rowNum + 1)
let points = new Array(rowNum).fill(0).map((foo, i) =>
new Array(rowPoints).fill(0).map((foo, j) => [
horizontalGap * (j + 1), verticalGap * (i + 1)
]))
this.points = points.reduce((all, item) => [...all, ...item], [])
const heights = this.heights = new Array(rowNum * rowPoints)
.fill(0).map(foo =>
Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
this.minHeights = new Array(rowNum * rowPoints)
.fill(0).map((foo, i) => heights[i] * Math.random())
this.randoms = new Array(rowNum * rowPoints)
.fill(0).map(foo => Math.random() + 1.5)
},
calcScale() {
const { width, height, svgWH } = this
const [w, h] = svgWH
this.svgScale = [width / w, height / h]
},
onResize() {
const { calcSVGData } = this
calcSVGData()
},
mergeColor() {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted() {
const { mergeColor } = this
mergeColor()
}
},
methods: {
afterAutoResizeMixinInit () {
const { calcSVGData } = this
calcSVGData()
},
calcSVGData () {
const { calcPointsPosition, calcScale } = this
calcPointsPosition()
calcScale()
},
calcPointsPosition () {
const { svgWH, rowNum, rowPoints } = this
const [w, h] = svgWH
const horizontalGap = w / (rowPoints + 1)
const verticalGap = h / (rowNum + 1)
let points = new Array(rowNum).fill(0).map((foo, i) =>
new Array(rowPoints).fill(0).map((foo, j) => [
horizontalGap * (j + 1), verticalGap * (i + 1)
]))
this.points = points.reduce((all, item) => [...all, ...item], [])
const heights = this.heights = new Array(rowNum * rowPoints)
.fill(0).map(foo =>
Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
this.minHeights = new Array(rowNum * rowPoints)
.fill(0).map((foo, i) => heights[i] * Math.random())
this.randoms = new Array(rowNum * rowPoints)
.fill(0).map(foo => Math.random() + 1.5)
},
calcScale () {
const { width, height, svgWH } = this
const [w, h] = svgWH
this.svgScale = [width / w, height / h]
},
onResize () {
const { calcSVGData } = this
calcSVGData()
},
mergeColor () {
const { color, defaultColor } = this
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
}
},
mounted () {
const { mergeColor } = this
mergeColor()
}
}
</script>