如何将 Buefy 集成到 Vue Formulate 控件中？

Question

我正在尝试让 vue 公式化控件使用 Buefy 进行分类。解决此问题的最佳方法是什么？

我想这可能是使用 vue-formulate class keys。

但我不确定要将它们匹配到什么对应的 Buefy 类。（或者也许有不同的方法？）

Answer 1

Buefy 的样式为 Bulma — 所以您有 4 个选项：

使用 class keys 将 Bulma 风格添加到您的 <FormulateInput> 中。
使用custom inputs包装Buefy组件。这将需要一些工作，因为它们不共享通用标记。例如，Buefy 并没有真正的“错误消息”，它有可以用 Bulma class “is-danger”.
标记的“消息”
沟 Buefy
抛弃 Vue 公式

(意见) – 如果你喜欢 Bulma 的风格，那么我会选择选项 #1。您始终可以将 Buefy 用于您的网站，但不能用于您的表单，而只需使用 Bulma 的 classes 配置 Vue Formulate 的 class 键（如果您使用 Buefy，Bulma classes 会自动包含）

完全披露：我是 Vue Formulate 的创建者。

Answer 2

我使用 Bulma（不是 Buefy）做了一些快速测试，下面的 class 绑定似乎适用于 Bulma 风格的输入

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

How do you Integrate Buefy into Vue Formulate controls?