Vue 动态 xlink:href attr [英] Vue dynamic xlink:href attr
问题描述
我想将图标名称作为道具传递给 vue 组件，并根据该图标名称使用它来呈现图标.我通过将图标名称传递给组件并将 xlink:href 绑定到数据属性调用 href 来做到这一点，但它不起作用！:/我怎样才能做到这一点?这是组件代码:
<svg class="icon"><use :xlink:href=href"></use></svg></模板><脚本>导出默认{name: '图标',道具: {图标:字符串},数据:函数(){返回 {href: `@sprite#icon-kb-${this.icon}`}}}这里是组件使用代码:
看起来还不错...
const icon = Vue.component('Icon', {道具: {图标:字符串},数据:函数(){返回 {href:`#${this.icon}`}},模板:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><使用:xlink:href="href"></use></svg>`})const ap = new Vue({el: "#app",组件:{图标}，数据() {返回 {图标:['icon-8pt-star','icon-star']}},计算:{图标InReverseOrder() {返回 this.icons.slice().reverse()}}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><Icon v-for="(icon, index) in icons" :icon="icon" :key="icon+'1'"></Icon><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="icon-8pt-star" viewBox="0 0 95 95"><path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5.49,316,50V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/></符号><symbol id="icon-star" viewBox="0 0 95 95"><多边形点数="47.5 0 62.18 31.27 95 36.29 71.25 60.63 76.86 95 47.5 78.77 18.14 95 23.75 60.63 0 36.220 36.29 36.25 37 37</符号></svg>
I want to pass icon name as props to a vue component and use it to render icon depends on that icon name. I did it by passing icon name to component and bind xlink:href to a data property call href but it does not work! :/ How can i do that? Here is component code:
<template>
<svg class="icon">
<use :xlink:href="href"></use>
</svg>
</template>
<script>
export default {
name: 'Icon',
props: {
icon: String
},
data: function () {
return {
href: `@sprite#icon-kb-${this.icon}`
}
}
}
</script>
and here is the component usage code:
<Icon icon="down"/>
It seems it works just fine...
const icon = Vue.component('Icon', {
props: {
icon: String
},
data: function () {
return {
href: `#${this.icon}`
}
},
template: `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use :xlink:href="href"></use>
</svg>
`
})
const ap = new Vue({
el: "#app",
components: { icon },
data() {
return {
icons: ['icon-8pt-star', 'icon-star']
}
},
computed: {
iconsInReverseOrder() {
return this.icons.slice().reverse()
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<Icon v-for="(icon, index) in icons" :icon="icon" :key="icon+'1'"></Icon>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-8pt-star" viewBox="0 0 95 95">
<path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/>
</symbol>
<symbol id="icon-star" viewBox="0 0 95 95">
<polygon points="47.5 0 62.18 31.27 95 36.29 71.25 60.63 76.86 95 47.5 78.77 18.14 95 23.75 60.63 0 36.29 32.82 31.27 47.5 0"/>
</symbol>
</svg>
这篇关于Vue 动态 xlink:href attr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
