Как интегрировать Buefy в элементы управления Vue Formulate?

Я пытаюсь заставить элементы управления формулировкой vue работать с помощью Buefy. Как лучше всего это сделать?

Я предполагаю, что это возможно с использованием ключей класса vue-formulate.

Но я не уверен, каким соответствующим классам Buefy им сопоставить. (Или, может быть, есть другой способ сделать это?)

Источник

1 ответ

Решение

Buefy выполнен в стиле Bulma - поэтому у вас есть 4 варианта:

  1. Используйте ключи классов, чтобы добавить стили Bulma в ваш<FormulateInput>с.

  2. Используйте настраиваемые входы для обертывания компонентов Buefy. Это потребует некоторой работы, поскольку у них нет общей разметки. Например, в Buefy на самом деле нет "сообщений об ошибках", у него есть "сообщения", которые можно пометить классом Bulma "is-dangerous".

  3. Дитч Буэфи

  4. Ditch Vue Formulate

(Мнение) - Если вам нравятся стили Bulma, то я бы выбрал вариант №1. Вы всегда можете использовать Buefy для своего сайта, но не для своих форм, и вместо этого просто настройте ключи классов Vue Formulate с классами Bulma (классы Bulma включаются автоматически, если вы используете Buefy)

Полное раскрытие: я создатель Vue Formulate.

Источник

Я провел небольшое тестирование с использованием Bulma (не Buefy), и следующая привязка классов, похоже, работает для входов в стиле Bulma

Vue.use(VueFormulate, {
  classes: {
    outer: 'field',
    wrapper: 'control',
    input: 'input'
  }
})
Источник
Другие вопросы по тегам