Question

如何在vue.js中按类型 attr显示图标？

HTML

<icon type="heart"></icon>
<icon type="heartFull"></icon>

Vue

Vue.component('icon', {
data: {
    type: {
        heart: '<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g>',
        heartFull: '<g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g>'
    }
},
props: {
    width: {
        type: Number,
        default: 24
    },
    height: {
        type: Number,
        default: 24
    },
},
computed: {
        viewBox() {
            return '0 0 ' + this.width + ' ' + this.height
        }
    },
template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height">{{ type }}</svg>',
})

预期结果

<icon type="heart"></icon>

它变成

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" width="24" height="24"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g></svg>

或

<icon type="heartFull"></icon>

它变成

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" width="24" height="24"><g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g></svg>

这样，随着时间的推移，我将创建更多的图标并轻松使用它们。谢谢！

Answer 1

您的类型不是属性而是数据属性。它是一个对象。因此，现在您要将数据中的整个对象类型插入到svg中。

尝试一下：

Vue.component('icon', {
  props: {
    iconType: {
      type: String,
      default: "heart"
    },
    width: {
      type: Number,
      default: 24
    },
    height: {
      type: Number,
      default: 24
    }
  },
  data() {
    return {
      types: {
        heart:
          '<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g>',
        heartFull:
          '<g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g>'
      }
    };
  },
  computed: {
    viewBox() {
      return "0 0 " + this.width + " " + this.height;
    }
  },
  template:
    '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height" v-html="this.types[this.iconType]"></svg>'
};
})

<icon iconType ="heart"></icon>
<icon iconType ="heartFull"></icon>

如何通过vue.js自动插入SVG图标？

1 个答案: