浮动标签插件

• 安装
• 使用

使用来自 @formkit/addons 的 createFloatingLabelsPlugin 函数，您可以轻松地为任何 text 系列（text、email、url、date 等）或 textarea FormKit 输入添加浮动标签效果。

安装

要在 FormKit 中使用这个插件，请安装 @formkit/addons：

yarn add @formkit/addons

安装了 addons 包之后，您需要向 FormKit 注册插件并包含支持的 CSS 样式。createFloatingLabelsPlugin 有一个您可以配置的选项，该选项控制是否将浮动标签效果作为适用输入的默认效果：

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/addons/css/floatingLabels'

const config = defaultConfig({
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: true, // 默认为 false
    }),
  ],
})

export default config

使用

默认情况下，只有当您将新的 floating-label 属性设置为 true 时，浮动标签插件才会对 FormKit 输入生效。

如果您希望默认使用浮动标签，则在安装时将 useAsDefault 选项传递给插件。

// formkit.config.js
...
plugins: [
  createFloatingLabelsPlugin({
    useAsDefault: true
  }),
],
...

当将浮动标签设置为默认时，您仍然可以通过将 floating-label 属性设置为 false 来禁用 FormKit 输入上的浮动标签。

就是这样！在您的 FormKit 输入上添加浮动标签，只需额外的 3 行代码。