浮动标签插件

• 安装
• 使用方法

使用@formkit/addons中的createFloatingLabelsPlugin函数，您可以轻松地为任何text类型（text、email、url、date等）或textarea类型的FormKit输入框添加浮动标签样式。

安装

要安装浮动标签插件，我们需要从@formkit/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

使用方法

默认情况下，浮动标签插件只会在FormKit输入框上生效，如果您将新的floating-label属性设置为true。

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

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

当浮动标签被设置为默认样式时，您仍然可以通过将floating-label属性设置为false来禁用它们。

就是这样！只需额外的3行代码，即可在FormKit输入框上使用浮动标签。