如何将 Bootstrap 类实现为 Vue-Formulate？答案

【问题标题】：How to implement Bootstrap classes to Vue-Formulate?如何将 Bootstrap 类实现为 Vue-Formulate？
【发布时间】：2020-09-20 10:54:01
【问题描述】：

根据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"
/>

【问题讨论】：

标签： bootstrap-4 vuejs2 vue-formulate

【解决方案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'
    }
})

【讨论】：

【解决方案2】：

正如Vue Formulate documentation 中所说：

在给定的输入上更改类很容易。只需使用名为 [element class key]-class 的道具来定位您想要更改的类键。 要针对某个州使用 [element class key]-[state class key]-class。 ` 并且拥有

在Bootstrap documentation：

表单控件

文本表单控件（如 <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"

【讨论】：

谢谢。如果一切顺利，我会调查并报告给你！
效果很好，但是，添加验证引导类似乎会导致隐藏输入字段的问题。但除此之外，谢谢！帮助我。

【解决方案3】：

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

【讨论】：