如何实现Bootstrap类到Vue-Formulate？

问题描述

根据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="[e-mail]"
/>

解决方法

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

ipcMain.on('asynchronous-message',async (event,arg) => {
    const {filePaths} = await dialog.showOpenDialog({properties:['openFile']});
    const contents = await fs.promises.readFile(filePaths[0],'utf-8');
    mainWindow.webContents.send('asynchronous-message',contents);
    mainWindow.openDevTools();
})

,

如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="[e-mail]"
/>

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

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

,

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