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 0 +宽度+高度不起作用，如何解决？我是Vue.js的新手。

谢谢！

Answer 1

您应该改用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>',
})

Answer 2

除了您应将viewBox定义为计算值（如@ittus指出的事实）之外，0 0 + width + height不会求值为字符串，因为：

a）0 0无效的javascript（Uncaught SyntaxError: Unexpected number）

b）width和height都是数字。 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}`
}

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

2 个答案: