Vue项目中动态给svg 中 xlink:href 属性赋值

Vue项目中动态给svg 中 xlink:href 属性赋值在vue项目中有这样需求：需要将svg中xlink:href 属性通过传值的方式，修改图标名字绑定属性的时候我们总是习惯使用 (:属性)的方式，但是对与 “xlink:href” 这样结构的属性，（:xlink:href）是没用的，所以使用（v-bind:xlink:href）就可以啦<template slot="name"

是个前端

11102人浏览 · 2021-04-23 16:09:53

是个前端 · 2021-04-23 16:09:53 发布

在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 () {
        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}`
        }
      }
    },