如何通过viewBox计算SVG viewBox？

Question

如何通过vue.js自动评估SVG的视图框？

我的代码：

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 +宽度+高度不工作，如何修复它？我是新来的Vue.js。

谢谢!

Answer 1

除了应该将viewBox定义为@ittus指出的计算值之外，0 0 + width + height不计算字符串，因为：

0 0是无效的javascript (Uncaught SyntaxError: Unexpected number)

( b) width和height都是数字。0 + width + height将计算为一个数字，默认为48。

使用以下之一创建字符串：

级联(在这里读更多)：

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

或模板文字(在这里读更多)：

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

Answer 2

你应该用computed代替

Vue.component('icon', {
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"></svg>',
})