Vue FormKit 中链接按钮制作指南：两种优雅的方法

vue.js

2024-03-16 00:53:18

在 Vue FormKit 中制作链接按钮

问题陈述

在使用 Vue FormKit 的项目中，你想要创建看起来像按钮但其实是路由链接的元素，例如取消按钮或返回按钮。由于 FormKit 使用了复杂的主题系统，直接应用按钮样式会很困难，因为主题会动态地应用很多类。

方法

有两种方法可以将 FormKit 按钮样式应用于路由链接：

方法 1：使用 CSS 类

你可以使用 v-bind 指令将 FormKit 按钮样式应用于路由链接：

<router-link :class="'inline-block bg-primary-500 text-white ...'" to="/back">
  返回
</router-link>

确保根据你的 FormKit 主题调整 CSS 类。

方法 2：使用 FormKit 按钮组件

你也可以使用 FormKit 按钮组件并设置 type 属性为 submit：

<FormKit type="submit" to="/back">
  返回
</FormKit>

注意事项

使用第二种方法时，需要在 FormKit 按钮组件中处理表单提交。
可以使用 v-slot 在 FormKit 按钮中插入自定义内容，例如图标。

代码示例

方法 1：

<template>
  <router-link :class="'inline-block bg-primary-500 text-white ...'" to="/back">
    返回
  </router-link>
</template>

方法 2：

<template>
  <FormKit type="submit" to="/back">
    <span class="mr-2">返回</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="inline-block" viewBox="0 0 16 16">
      <path d="M11.354 9.354a.5.5 0 0 0 0-.708L5.707 4.707a.5.5 0 0 0-.708 0l-5.647 5.646a.5.5 0 0 0 .708.708l5.647-5.647 4.94 4.94a.5.5 0 0 0 .708 0z" />
    </svg>
  </FormKit>
</template>