Плохо:
<div class="color-label red" @click="color = '#FB253E', textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label green" @click="color = '#19AD6A' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label orange" @click="color = '#FC6621' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label blue" @click="color = '#1386a3' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div>
<div class="color-label yellow" @click="color = '#FFED00' ,textColor = '#111111' , strokeColor = '#111111';"></div>
<div class="color-label lightgreen" @click="color = '#00ff00' ,textColor = '#111111' , strokeColor = '#111111';"></div>
<div class="color-label white" @click="color = '#ffffff' ,textColor = '#111111' , strokeColor = '#111111';"></div>
Лучше:
<div
v-for="n in colors"
:class="[ 'color-label', n.name ]"
@click="onColorClick(n.values)"
></div>
data: () => ({
colors: [
{ values: [ '#FB253E', '#FFF', '#FFF' ], name: 'red' },
{ values: [ '#19AD6A', '#FFF', '#FFF' ], name: 'green' },
{ values: [ '#FC6621', '#FFF', '#FFF' ], name: 'orange' },
{ values: [ '#1386A3', '#FFF', '#FFF' ], name: 'blue' },
{ values: [ '#FFED00', '#111', '#111' ], name: 'yellow' },
{ values: [ '#00FF00', '#111', '#111' ], name: 'lightgreen' },
{ values: [ '#FFFFFF', '#111', '#111' ], name: 'white' },
],
...
}),
methods: {
onColorClick([ color, textColor, strokeColor ]) {
Object.assign(this, { color, textColor, strokeColor });
},
...
},
Плохо:
<tspan x="0" y="-10" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': firstLineFontSize }">{{ firstLine }}</tspan>
<tspan x="0" y="17" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': secondLineFontSize }">{{ secondLine }}</tspan>
<tspan x="-2" y="45" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': thirdLineFontSize }">{{ thirdLine }}</tspan></text>
...
<input type="text" placeholder="enter 1 text line" @input="changeFirstLine">
<input type="number" value='25' @input="changeFirstLineFontSize"><span> px </span>
<input type="text" placeholder="enter 2 text line" @input="changeSecondLine">
<input type="number" value='18' @input="changeSecondLineFontSize"><span> px </span>
<input type="text" placeholder="enter 2 text line" @input="changeThirdLine">
<input type="number" value='18' @input="changeThirdLineFontSize"><span> px </span>
data: {
firstLine: 'Your',
secondLine: 'custom',
thirdLine: 'text',
firstLineFontSize: '25',
secondLineFontSize: '18',
thirdLineFontSize: '18',
...
},
methods: {
changeFirstLine: function(event) {
this.firstLine = event.target.value;
},
changeSecondLine: function(event) {
this.secondLine = event.target.value;
},
changeThirdLine: function(event) {
this.thirdLine = event.target.value;
},
changeFirstLineFontSize: function(event) {
this.firstLineFontSize = event.target.value;
},
changeSecondLineFontSize: function(event) {
this.secondLineFontSize = event.target.value;
},
changeThirdLineFontSize: function(event) {
this.thirdLineFontSize = event.target.value;
},
...
Лучше:
<tspan
v-for="n in lines"
v-text="n.text || n.placeholder"
:x="n.x"
:y="n.y"
:style="{ 'font-size': n.fontSize }"
text-anchor="middle"
alignment-baseline="middle"
font-family="'Swiss721BT-RomanCondensed'"
></tspan>
...
<template v-for="(n, i) in lines">
<input type="text" v-model="n.text" :placeholder="`enter ${i + 1} text line`">
<input type="number" v-model="n.fontSize"><span> px </span>
</template>
data: () => ({
lines: [
{ x: 0, y: -10, fontSize: 25, placeholder: 'Your' },
{ x: 0, y: 17, fontSize: 18, placeholder: 'custom' },
{ x: -2, y: 45, fontSize: 18, placeholder: 'text' },
],
...
}),
