Vue项⽬中动态给svg中xlink：href属性赋值
在vue项⽬中有这样需求： 需要将svg中xlink:href 属性 通过传值的⽅式，修改图标名字
绑定属性的时候我们总是习惯使⽤ (：属性)的⽅式，但是对与 “xlink:href” 这样结构的属性，（:xlink:href）是没⽤的， 所以使⽤（v-bind:xlink:href）就可以啦
<template slot="name" slot-scope="text, record">
<svg class="icon" aria-hidden="true" v-if="record.projectType">
<use v-bind:xlink:href="iconName(record.projectType)"></use>
</svg>{{text}}
</template>
computed:{
iconName:function(){
html href属性
return function(type){
let name =''
switch(type){
case'0':
name ='#iconicon_file-01'
break;
case'1':
name ='#iconicon_D'
break;
case'2':
name ='#iconicon_B'
break;
case'3':
name ='#iconicon_b'
break;
case'4':
name ='#iconicon_X'
break;
case'5':
name ='#iconicon_G1'
break;
default:
name ='#iconicon_file-01'
break;
}
return`${name}`
}
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。