Как рассчитать SVG viewBox через vue.js?

Question

как автоматически оценить viewbox SVG через vue.js?

Мой код:

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

В дополнение к тому факту, что вы должны определить viewBox как вычисленное значение, как указано @ittus, 0 0 + width + height не вычисляется как строка, потому что:

a) 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>',
})