如何实现 Bootstrap 类 到 Vue-Formulate？

Question

根据Vue Formulate，可以给它加上Bootstrap：

With provided class props you can add your own set of style classes globally or on a case-by-case basis. Tailwind? No problem. Bootstrap? You're covered. Roll your own? Right on, it’s supported.

好的，那你是怎么做到的？

我这样试过，但没有用：

<FormulateInput
  type="email"
  class="form-control" <------bootstrap class
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>

Answer 1

尝试使用 input-class 或 element-class 而不是 class 属性。您还可以全局自定义 类。有关详细信息，请阅读 Vue Formulate 文档中有关 customizing classes 的章节。

Answer 2

正如 Vue Formulate documentation 中所说：

更改给定输入的 classes 很容易。只需使用名为 [element class key]-class 的道具定位您想要更改的 class 键。 要定位一个州，请使用 [element class key]-[state class key]-class。 ` 并拥有

在Bootstrap documentation中：

表单控件

文本表单控件（如 <input>s、<select>s 和 <textarea>s）的样式为 .form-control class。包括一般外观、焦点状态、大小调整等样式。

这意味着您的目标是 input。

你应该尝试这种方式：

<FormulateInput
  type="email"
  input-class="form-control"
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>

您还可以通过添加属性来添加验证 bootstrap classes:

input-is-valid-class="valid-feedback"
input-has-errors-class="invalid-feedback"

Answer 3

我使用以下内容 全局 将 Vue Formulate (2.5) 应用的样式匹配到 Bootstrap 4:

Vue.use(VueFormulate, {
    classes: {
        outer: 'form-group',
        input: 'form-control',
        inputHasErrors: 'is-invalid',
        help: 'form-text text-muted',
        errors: 'list-unstyled text-danger'
    }
})