Как связать линейный градиент-фон свойство может из динамических переменных, составляющих названия цветов, углы и т.д.?

Вопрос задан: 2 месяца назад Последняя активность: 2 месяца назад
up 1 down

Я постоянно работаю в этой проблему. Мне нужно, чтобы иметь возможность установить фон различных элементов в моем компоненте как динамические линейные градиенты. (Контекст создает фон сетки, что весы и подстраивается в зависимости от различных входов).

Я хочу быть в состоянии создать мой linear-gradient CSS фон свойство динамически в зависимости, например, вот упрощенная версия того, что я пытаюсь достичь:

createBackgroundString(){
    return 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + this.color2 + ')';
}

..., а затем придерживаться, что в моем :style атрибут иметь Vue применять его динамически:

v-bind:style="{ background: createBackgroundString() }"

Vue отбросы (игнорирует) это прямо, предположительно потому, что результирующая строка слишком сложна, чтобы соответствовать шаблону свойств, который ожидает простую строку, как «красные» или «# FF000» и т.д.

Есть ли способ/хак/обходной путь для достижения этой цели в Vue? На данный момент мне приходится прибегать к JQuery для этого, которое далеко от идеала.

1 ответ

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

Реклама

up 1 down accepted

Я могу получить его на работу, как это:

<div :style="{ backgroundImage: createBackgroundString }" />

и вычисляется проп:

data() {
    return {
      angle: '50',
      color1: 'red',
      color2: 'blue'
    }
  },
  computed: {
    createBackgroundString() {
      return `linear-gradient(${this.angle}deg, ${this.color1}, ${this.color2})`;
    }
  }

Вы не должны использовать обратные кавычки ( `), если вы не хотите. Я предпочитаю его.

Обратите внимание, что я изменил createBackgroundString() в createBackgroundString

Ошибка 505

Что-то пошло не так

Попробуйте воспользоваться поиском