在vue里的svg标签里,想用v-for实现下面的列表
<text x="-120" y="1050" font-size="45" @click="showWenduDialog(1, 1)">1号主电机</text>
<text x="280" y="1050" font-size="45" @click="showWenduDialog(1, 2)">2号主电机</text>
<text x="680" y="1050" font-size="45" @click="showWenduDialog(1, 3)">3号主电机</text>
<text x="1080" y="1050" font-size="45" @click="showWenduDialog(1, 4)">4号主电机</text>
<text x="1480" y="1050" font-size="45" @click="showWenduDialog(1, 5)">2号
<tspan x="1480" y="1100" >主电机</tspan >
</text>
<text x="1880" y="1050" font-size="45" @click="showWenduDialog(1, 6)">6号主电机</text>
<text x="2380" y="1050" font-size="45" @click="showWenduDialog(1, 7)">7号
<tspan x="2380" y="1100" >主电机</tspan >
</text>
<text x="2780" y="1050" font-size="45" @click="showWenduDialog(1, 8)">8号主电机</text>
实现代码如下:
<g v-for="(item,index) in this.jgres" :key="index">
<text v-bind:x="getXvalue(index)" y="1050"
font-size="45" @click="showWenduDialog(item.jid, index+1)"
v-html="getJgHtmlName(item.jgName,index)"></text>
</g>
getXvalue方法如下:
getXvalue(index) {
return -30+index*400;
},
getJgHtmlName方法如下:
getJgHtmlName(name,index) {
if(name.length>=9){
return name.substr(0,7) + '<tspan x="' + this.getXvalue(index) +
'" y="1100" >' + name.substr(7) + '</tspan >'
}
else{
return name
}
},
把两个方法,写在computed里,代码如下:
computed:{
getXvalue(){
return (index)=>{
return -30+index*400;
}
},
getJgHtmlName() {
return(name,index)=>{
if(name.length>=9){
return name.substr(0,7) + '<tspan x="' + this.getXvalue(index) +
'" y="1100" >' + name.substr(7) + '</tspan >'
}
else{
return name
}
}
}
},