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

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

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

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


buefy vue-formulate
person hitwill    schedule 24.08.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

  3. Дитч Буэфи

  4. Ditch Vue Formulate

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

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

person jpschroeder    schedule 24.08.2020

arrow_upward
3
arrow_downward

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

Vue.use(VueFormulate, {
  classes: {
    outer: 'field',
    wrapper: 'control',
    input: 'input'
  }
})
person Beerswiller    schedule 18.09.2020