bootstrap-4 - 如何将 Bootstrap 类实现为 Vue-Formulate？

Question

根据Vue Formulate，您可以将 Bootstrap 添加到其中：

使用提供的类道具，您可以全局或逐个添加您自己的一组样式类。顺风？没问题。引导程序？你被覆盖了。自己滚？对了，支持。

好的，那你怎么做呢？

我这样尝试过，但没有奏效：

<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

我使用以下内容将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'
    }
})

Answer 2

正如Vue Formulate 文档中所说：

在给定输入上更改类很容易。只需使用名为 [element class key]-class. 以状态为目标使用 [element class key]-[state class key]-class. ` 并且拥有

在引导文档中：

表单控件

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

这意味着您的目标是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"
/>

您还可以通过添加属性来添加验证引导类：

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

Answer 3

尝试使用input-classorelement-class代替class属性。您还可以全局自定义类。有关更多信息，请阅读Vue Formulate 文档中有关自定义类的章节。