javascript - 如何通过vue.js计算SVG viewBox？

Question

如何通过vue.js自动评估SVG的viewbox？

我的代码:

Vue.component('icon', {
props: {
    width: {
        type: Number,
        default: 24
    },
    height: {
        type: Number,
        default: 24
    },
    viewBox: {
        default: 0 0 + width + height
    }
},
template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height"></svg>',
})

0 0 + 宽度 + 高度不起作用，如何修复？我是 Vue.js 新手。

谢谢!

Answer 1

除了您应该像 @ittus 指出的那样将 viewBox 定义为计算值这一事实之外，0 0 + width + height 不会计算为字符串，因为:

a) 0 0 不是有效的 javascript (Uncaught SyntaxError: Unexpected number)

b) 宽度和高度都是数字。 0 + width + height 将计算为数字，默认情况下为 48。

使用以下方法之一创建字符串:

串联 (Read more here):

viewBox: {
    default: '0 0 ' + this.width + ' ' + this.height
}

或模板文字 ( Read more here ):

viewBox: {
    default: `0 0 ${this.width} ${this.height}`
}