如何将引导类实现到Vue-Formulate中？

Question

根据Vue公式，您可以在其中添加引导程序：

通过提供的类支持，您可以在全局或逐个案例的基础上添加您自己的样式类集。顺风？没问题。靴带？你被覆盖了。自己滚？就这样，它是支持的。

好吧，那你是怎么做的？

我试过这样做，但没有用：

<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格式文件里说的

在给定的输入上更改类很容易。只需用一个名为[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 2

我使用了以下全局 match Vue used (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 3

尝试使用input-class或element-class而不是class属性。您还可以全局自定义这些类。有关更多信息，请阅读Vue公式文档中关于定制类的章节。