Form Adapter 组件库

一个基于 Vue3 + Vite + TypeScript 的组件库，支持全局注册和完整的类型提示。

特性

• ✅ Vue3 组合式 API
• ✅ TypeScript 完整类型支持
• ✅ 全局注册支持类型提示
• ✅ 按需引入
• ✅ Vite 构建

安装

npm install form-adapter

使用方式

全局注册（推荐）

全局注册后，所有组件都会有完整的类型提示。

import { createApp } from 'vue'
import FormAdapter from 'form-adapter'
import 'form-adapter/style.css' // 引入样式（如果需要）

const app = createApp(App)
app.use(FormAdapter)
app.mount('#app')

使用组件：

<template>
  <FormButton type="primary" @click="handleClick">点击我</FormButton>
  <FormInput v-model="value" placeholder="请输入内容" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const handleClick = () => {
  console.log('按钮被点击')
}
</script>

按需引入

如果只需要部分组件，可以按需引入：

<template>
  <Button type="primary">按钮</Button>
  <Input v-model="value" />
</template>

<script setup lang="ts">
import { Button, Input } from 'form-adapter'
import { ref } from 'vue'

const value = ref('')
</script>

类型使用

组件库提供了完整的类型导出：

import type { ButtonProps, InputProps } from 'form-adapter'

// 使用类型
const buttonProps: ButtonProps = {
  type: 'primary',
  disabled: false,
}

组件列表

Button 按钮

按钮组件，支持多种类型。

Props:

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | 'primary' \| 'default' \| 'danger' \| 'success' \| 'warning' | 'primary' | 按钮类型 | | disabled | boolean | false | 是否禁用 |

Events:

| 事件名 | 参数 | 说明 | |--------|------|------| | click | (event: MouseEvent) | 点击事件 |

Input 输入框

输入框组件，支持 v-model。

Props:

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | 'text' \| 'password' \| 'number' \| 'email' \| 'tel' \| 'url' | 'text' | 输入框类型 | | placeholder | string | - | 占位符 | | disabled | boolean | false | 是否禁用 | | modelValue | string \| number | - | 输入值（v-model） |

Events:

| 事件名 | 参数 | 说明 | |--------|------|------| | update:modelValue | (value: string \| number) | v-model 更新事件 | | input | (value: string \| number) | 输入事件 | | blur | (event: FocusEvent) | 失焦事件 | | focus | (event: FocusEvent) | 聚焦事件 |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

类型支持说明

组件库通过以下方式提供类型支持：

1. 全局组件类型扩展：通过 declare module '@vue/runtime-core' 扩展全局组件类型
2. 类型导出：所有组件的 Props 类型都通过 export type 导出
3. TypeScript 声明文件：构建时会自动生成 .d.ts 类型声明文件

在使用全局注册时，编辑器会自动识别 FormButton、FormInput 等组件，并提供完整的类型提示和自动补全。

License

MIT