# @fiscozen/input 中文文档

规范地址：https://npmcn.com/package/%40fiscozen/input/

版本：3\.7\.0
npm 元数据更新时间：2026-11-12T14:09:08.054Z
中文译文更新时间：2026-11-14T20:30:22.644Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fiscozen/input
原文对照：https://npmcn.com/package/%40fiscozen/input/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：379 kB，32 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：vue ^3\.4\.13，tailwindcss ^3\.4\.1，@fiscozen/icons ^1\.0\.8
- 首次发布：2024-07-25T12:14:27.149Z
- 最新版本发布：2026-11-12T14:09:07.430Z
- 近 30 天下载量：3164（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：52（近 12 个月 31 个）

## 中文简介

设计系统输入部分

## 安装

```sh
npm install @fiscozen/input
```

也可以使用：`pnpm add @fiscozen/input`、`yarn add @fiscozen/input`、`bun add @fiscozen/input`

## README

# @ fiscozen/ 输入

Vue 3 应用程序的灵活输入组件库,主要包括图标支持,验证状态,多变体,以及带有数字格式的专门货币输入.

## 特征

-   **多重输入类型**: 文本、密码、电子邮件、电话号码、电话、 url
-   **图标支持**: 左右图标(静态或可点击按钮)
-   **审定国**: 有视觉反馈的错误和有效状态
-   **两个备选案文**: 普通和浮动标签演示文稿
-   **两个环境**: 前台和后台(不同高地和样式)
-   **货币投入**: 具有地方意识数字格式的专门组件
-   **完全无障碍**: ARIA属性,键盘导航,屏幕阅读器支持
-   **可自定义**: 标签、图标、帮助文本和错误消息的槽
-   **类型脚本**: 具有类型脚本定义的完整类型安全

## 安装

```bash
npm install @fiscozen/input
```

## 构成部分

此套件输出三个组件:

-   `FzInput` - 有标签、图标和验证状态的标准输入
-   `FzCurrencyInput` - 有数字格式和验证的专门货币输入
-   `FzInputLabel` - FzInput的标签行,带有所需的星号, `truncate` 还有一个 `aside` 右侧的文本; FzSelection 也可以。 直接用它来构建一个自己的领域

## 基本用途

### Fz 输入

```vue
<script setup lang="ts">
import { FzInput } from '@fiscozen/input'
import { ref } from 'vue'

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

<template>
  <FzInput label="Email" type="email" v-model="email" />
</template>
```

### FzCurrent 输入

```vue
<script setup lang="ts">
import { FzCurrencyInput } from '@fiscozen/input'
import { ref } from 'vue'

const amount = ref<number | undefined>(undefined)
</script>

<template>
  <FzCurrencyInput label="Amount" v-model="amount" />
</template>
```

## 道具

### FzInput 支持软件

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | \- 说吧 | 输入字段上方显示的文本标签 。 如果提供了标签槽, 则被覆盖 . |
| `truncateLabel` | `boolean` | `false` | 将标签保留在一行上,在宽于字段时用椭圆剪接;在悬浮上和输入有焦点时,被剪接的标签在工具提示中完整显示. 所需星号在切口后保持可见. 对标签槽没有影响. |
| `labelAside` | `string` | \- 说吧 | 标签行右侧显示的短文本, 大小较小, 如在手键键旁的计算值 。 投入宣布为描述. 与 `truncateLabel` 标签先被剪切,再被剪切到大约十二个字符,然后只有这个文本;没有它,标签包和这个文本会留在它的第一行. 没有效果 `label` 或者在标签槽. |
| `environment` | `'backoffice' | 'frontoffice'` | `'frontoffice'` | 决定输入大小和样式的环境 |
| `size` | `'sm' | 'md' | 'lg'` | \- 说吧 | **折旧**: 使用 `environment` 代替道具。 环境大小值映射: sm/md →后台, lg → 前台 |
| `placeholder` | `string` | \- 说吧 | 输入为空时显示的占位符文本 。 行为因变体而异. |
| `required` | `boolean` | `false` | 按需要标记输入 。 将星号添加到标签并设定本地属性 . |
| `disabled` | `boolean` | `false` | 禁用输入交互并应用已禁用的样式 |
| `error` | `boolean` | `false` | 显示带有红色边框的错误状态, 并允许错误位置显示 |
| `valid` | `boolean` | `false` | 在正确时在右边显示成功检查标记图标。 胜过右Icon |
| `variant` | `'normal' | 'floating-label'` | `'normal'` | 视觉展示风格. 焦点/ 填充时将“ 浮动标签” 占位符移动到输入之上 |
| `type` | `'text' | 'password' | 'email' | 'number' | 'tel' | 'url'` | `'text'` | 原生 HTML 输入类型 。 确定键盘布局和验证行为 |
| `leftIcon` | `string` | \- 说吧 | 输入左侧显示的字型壮观图标名称 |
| `leftIconVariant` | `IconVariant` | \- 说吧 | 左侧图标的视觉样式变体( 固态、 正态、 光等) |
| `leftIconButtonVariant` | `IconButtonVariant` | \- 说吧 | 可点击按钮时左侧图标的按钮变体 |
| `leftIconAriaLabel` | `string` | \- 说吧 | 可点击时左侧图标可访问标签 。 屏幕阅读器访问需要 |
| `rightIcon` | `string` | \- 说吧 | 输入右侧显示的字体优美图标名称 |
| `rightIconSize` | `IconSize` | \- 说吧 | **折旧**: 右边图标的大小覆盖 。 图标现在有"md"的固定尺寸. 这个道具被忽略了. |
| `rightIconVariant` | `IconVariant` | \- 说吧 | 右图标(固态、正态、光等)的视觉样式变体 |
| `rightIconButton` | `boolean` | `false` | 将右图标作为可点击按钮而不是静态图标 |
| `rightIconButtonVariant` | `IconButtonVariant` | `'invisible'` | 右侧图标的按钮变体, 当右侧的Icon按钮是真实的 |
| `rightIconAriaLabel` | `string` | \- 说吧 | 可点击时右图标可访问标签 。 屏幕阅读器访问需要 |
| `secondRightIcon` | `string` | \- 说吧 | 在输入的右侧显示为第二个图标的字体壮观图标名称 。 顺序: 二右Icon > 右Icon > 有效( 都可以同时出现) |
| `secondRightIconClass` | `string` | \- 说吧 | 应用到第二右图标容器的 CSS 类 |
| `secondRightIconVariant` | `IconVariant` | \- 说吧 | 第二右图标(固态、正态、光等)的视觉样式变体 |
| `secondRightIconButton` | `boolean` | `false` | 将右下方图标作为可点击按钮而不是静态图标 |
| `secondRightIconButtonVariant` | `IconButtonVariant` | `'invisible'` | 当第二个右键是真实的时,第二个右键图标的按钮变体 |
| `secondRightIconAriaLabel` | `string` | \- 说吧 | 可点击时可访问第二右图标的标签 。 屏幕阅读器访问需要 |
| `pattern` | `string` | \- 说吧 | HTML5 本地浏览器验证模式属性 |
| `name` | `string` | \- 说吧 | 提交形式和识别的土著名称属性 |
| `readonly` | `boolean` | `false` | 本地只读属性 。 防止用户输入,同时保持外地焦点 |
| `maxlength` | `number` | \- 说吧 | 原生最大长度属性 。 限制字符最多数 |
| `autocomplete` | `boolean` | `false` | 本地自动完整属性 。 控制浏览器自动完成和建议。 当错误时, 设置自动完成="关闭"以禁用浏览器自动完成 |
| `rightIconClass` | `string` | \- 说吧 | 适用于右图标容器的其他 CSS 类 |
| `leftIconClass` | `string` | \- 说吧 | 左侧图标容器应用的其他 CSS 类 |

### FzCurrent 输入道具

FzCurrency Input 扩展了 FzInput 道具(但 `type`, (中文(简体) ), `modelValue`, (中文(简体) ), `rightIcon`, (中文(简体) ), `rightIconSize`, (中文(简体) ), `rightIconVariant`, (中文(简体) ), `rightIconButton`, (中文(简体) ), `rightIconButtonVariant`, (中文(简体) ), `rightIconAriaLabel`, (中文(简体) ), `rightIconClass`, (中文(简体) ), `secondRightIcon`, (中文(简体) ), `secondRightIconClass`, (中文(简体) ), `secondRightIconVariant`, (中文(简体) ), `secondRightIconButton`, (中文(简体) ), `secondRightIconButtonVariant`, (中文(简体) ), `secondRightIconAriaLabel`)并补充:

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `modelValue` | `number | string | undefined` | \- 说吧 | **类型断言**页:1 `number | string | undefined` 作为输入,但 **总是发出** `number | undefined` (从来没有) `string`) (中文(简体) ). 弦被贬值并触发了控制台警告. 见 [v- 型号行为](https://npmcn.com/package/%40fiscozen/input/#readme-v-model-type-behavior) 详细情况. |
| `nullOnEmpty` | `boolean` | `false` | 将空输入转换为无效而不是 0 |
| `minimumFractionDigits` | `number` | `2` | 在格式化输出中最小小数位数 |
| `maximumFractionDigits` | `number` | `2` | 格式化输出中的最大小数位数 |
| `min` | `number` | \- 说吧 | 最小允许值 。 此下方的值被夹到分 |
| `max` | `number` | \- 说吧 | 最大允许值 。 将上面的值限制为最大 |
| `step` | `number` | `1` | 箭头按钮的分步递增。 当强制Step属实时, 数值会四舍五入到最接近的多步 |
| `forceStep` | `boolean` | `false` | 执行定量: 数值自动四舍五入到最接近的多步 |
| `stepUpAriaLabel` | `string` | \- 说吧 | 自定义可访问的标签用于上调按钮 。 如果没有提供,请使用默认标签 |
| `stepDownAriaLabel` | `string` | \- 说吧 | 自定义下出按钮的可访问标签 。 如果没有提供,请使用默认标签 |

**说明**数字 : `rightIcon` 财务报告和审定财务报表 `secondRightIcon` fzCurrencyInput中没有道具。 仅 `valid` 复选标记图标可以在步骤控件旁显示.

## 槽数

| 槽 | 说明 |
| --- | --- |
| `label` | 自定义标签内容( 覆盖) `label` 圆柱形) |
| `left-icon` | 自定义左侧图标内容( 覆盖) `leftIcon` 圆柱形) |
| `right-icon` | 自定义右侧图标内容( 覆盖) `rightIcon` 螺旋桨和 `valid` 检查标记) |
| `helpText` | 在没有出错时在输入后显示帮助文本 |
| `errorMessage` | 下面输入时显示出错消息 `error` 真实 |

## 备选案文

### 正常( 默认)

输入字段内带有上方标签和占位符的标准输入.

```vue
<FzInput label="Email" type="email" placeholder="Enter your email" v-model="email" />
```

### 浮动标签

当焦点或输入有值时,浮动标签变体将占位符移动到输入上方.

```vue
<FzInput 
  label="Email" 
  variant="floating-label" 
  placeholder="Enter your email" 
  v-model="email" 
/>
```

## 环境

输入支持决定其高度和样式的两个环境:

-   **前台办公室** (默认):较大的间隔
-   **后台办公室**: 紧凑相距

```vue
<template>
  <FzInput label="Frontoffice (Default)" environment="frontoffice" v-model="value1" />
  <FzInput label="Backoffice" environment="backoffice" v-model="value2" />
</template>
```

**说明**编号: `size` 道具被贬. 使用 `environment` 换句话说.

## 输入类型

### 文本

```vue
<FzInput label="Name" type="text" v-model="name" />
```

### 密码

```vue
<FzInput label="Password" type="password" v-model="password" />
```

### 电子邮件

```vue
<FzInput label="Email" type="email" required v-model="email" />
```

### 数目

```vue
<FzInput label="Age" type="number" v-model="age" />
```

### 电话

```vue
<FzInput 
  label="Phone" 
  type="tel" 
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
  v-model="phone" 
/>
```

### 網址

```vue
<FzInput label="Website" type="url" v-model="website" />
```

## 国家

### 需求

所需的输入显示标签旁边的星号( \*)并设置所需的本地属性 .

```vue
<FzInput label="Email" type="email" required v-model="email" />
```

### 已禁用

已禁用输入会阻止用户交互,并应用变音的造型.

```vue
<FzInput label="Disabled Input" disabled v-model="value" />
```

### 错误

出错状态显示红色边框,并通过出错位置显示出错误消息.

```vue
<FzInput label="Email" type="email" :error="hasError" v-model="email">
  <template #errorMessage>Please enter a valid email address</template>
</FzInput>
```

### 有效

有效状态显示右侧的绿色检查标记图标 .

```vue
<FzInput label="Email" type="email" :valid="isValid" v-model="email" />
```

### 只读

只读输入会阻止编辑,但保持可聚焦和可见.

```vue
<FzInput label="Read-only Value" readonly v-model="readonlyValue" />
```

## 带有图标

### 左边图标

```vue
<FzInput 
  label="Date" 
  leftIcon="calendar-lines" 
  v-model="date" 
/>
```

### 右图标

```vue
<FzInput 
  label="Search" 
  rightIcon="magnifying-glass" 
  v-model="search" 
/>
```

### 右图标为按钮

右侧图标可以作为可点击按钮提供(用于密码能见度切换,清除按钮等).

```vue
<template>
  <FzInput 
    label="Password" 
    :type="passwordType"
    rightIcon="eye"
    :rightIconButton="true"
    rightIconButtonVariant="secondary"
    rightIconAriaLabel="Toggle password visibility"
    @fzinput:right-icon-click="togglePasswordVisibility"
    v-model="password" 
  />
</template>

<script setup>
import { ref } from 'vue'

const passwordType = ref('password')
const password = ref('')

const togglePasswordVisibility = () => {
  passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
}
</script>
```

### 可访问的可点击图标

当图标可以点击时,请提供 `leftIconAriaLabel` 或者说 `rightIconAriaLabel` 用于键盘访问:

```vue
<FzInput 
  label="Search" 
  leftIcon="magnifying-glass"
  leftIconAriaLabel="Open search options"
  @fzinput:left-icon-click="openSearchOptions"
  v-model="search" 
/>
```

### 两个图标

```vue
<FzInput 
  label="Amount" 
  leftIcon="dollar-sign" 
  rightIcon="credit-card" 
  v-model="amount" 
/>
```

## 帮助文本和错误消息

### 帮助文本

当没有出错时,请在输入下方显示帮助文本.

```vue
<FzInput label="Username" v-model="username">
  <template #helpText>
    Username must be between 3 and 20 characters
  </template>
</FzInput>
```

### 错误消息

当错误道具属实时,错误消息会显示在输入下方.

```vue
<FzInput label="Email" type="email" :error="hasError" v-model="email">
  <template #errorMessage>
    Please enter a valid email address
  </template>
</FzInput>
```

## 自定义标签

您可以使用标签槽提供自定义标签内容 .

```vue
<FzInput v-model="value">
  <template #label>
    <strong>Custom Label</strong> with <em>formatting</em>
  </template>
</FzInput>
```

## 实例

### 带有验证的表格

```vue
<template>
  <form @submit.prevent="handleSubmit">
    <FzInput 
      label="Email" 
      type="email" 
      required 
      :error="errors.email"
      v-model="form.email"
    >
      <template #errorMessage v-if="errors.email">
        {{ errors.email }}
      </template>
    </FzInput>
    
    <FzInput 
      label="Password" 
      type="password" 
      required 
      :error="errors.password"
      v-model="form.password"
    >
      <template #errorMessage v-if="errors.password">
        {{ errors.password }}
      </template>
    </FzInput>
    
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  email: '',
  password: ''
})

const errors = ref({
  email: null,
  password: null
})

const handleSubmit = () => {
  // Validation logic
}
</script>
```

### 有可见度的密码切换

```vue
<template>
  <FzInput 
    label="Password" 
    :type="showPassword ? 'text' : 'password'"
    rightIcon="eye"
    :rightIconButton="true"
    @fzinput:right-icon-click="togglePassword"
    v-model="password" 
  />
</template>

<script setup>
import { ref } from 'vue'

const password = ref('')
const showPassword = ref(false)

const togglePassword = () => {
  showPassword.value = !showPassword.value
}
</script>
```

### 搜索输入

```vue
<FzInput 
  label="Search" 
  leftIcon="magnifying-glass" 
  rightIcon="xmark"
  :rightIconButton="true"
  @fzinput:right-icon-click="clearSearch"
  v-model="searchQuery" 
/>
```

### 输入最大长度

```vue
<FzInput 
  label="PIN" 
  type="text" 
  maxlength="4" 
  pattern="[0-9]{4}"
  v-model="pin" 
/>
```

## FzCurrent 输入

FzInput上建有数字格式化,验证,和步控的专用货币输入组件. 使用 Intl 格式化值。 Number Format 有本地意识分离器 .

### 特征

-   本地化数字格式化( 小数和千个分隔符)
-   最小/最大值约束
-   以箭头按钮进行量化
-   智能贴面解析( 自动发现小数/ 千位分隔符)
-   可配置的小数位数

### 基本用途

```vue
<script setup lang="ts">
import { FzCurrencyInput } from '@fiscozen/input'
import { ref } from 'vue'

const amount = ref<number | undefined>(undefined)
</script>

<template>
  <FzCurrencyInput 
    label="Amount" 
    v-model="amount" 
    :min="0" 
    :max="1000" 
  />
</template>
```

### 带步控件

步控(arrow 按钮)在FzCurrency Input中总是可见. 默认步骤为 1,但可以定制.

```vue
<FzCurrencyInput 
  label="Quantity" 
  v-model="quantity" 
  :step="5"
/>
```

### 随步量化

何时 `forceStep` ,值会自动四舍五入到最接近的多步.

```vue
<FzCurrencyInput 
  label="Quantity" 
  v-model="quantity" 
  :step="4"
  :forceStep="true"
/>
```

### 受敏/最大限制

```vue
<FzCurrencyInput 
  label="Price" 
  v-model="price" 
  :min="0" 
  :max="9999.99"
  :minimumFractionDigits="2"
  :maximumFractionDigits="2"
/>
```

### 有有效状态

在步骤控件旁显示有效的检查标记图标 .

```vue
<FzCurrencyInput 
  label="Amount" 
  v-model="amount" 
  :valid="isValid"
/>
```

### 货币输入行为

-   **格式化**: 数值采用Intl格式。 带有地语设置的数字格式( 默认为“ it- IT ”)
-   **粘贴处理**: 自动检测和剖析各种编号格式(例如"1.234,56","1,234.56")
-   **步骤控制**:箭头按钮总是可见(默认步骤=1). 支持键盘访问( Enter/ Space to active)
-   **步骤量化**: 当 `forceStep` 正确, 数值自动四舍五入到最接近的多步
-   **空值**: 当 `nullOnEmpty` 真实, 空输入转换为无效而不是 0
-   **有效状态**: 可以在步骤控件旁显示有效的检查标记图标
-   **右图标**数字 : `rightIcon` 财务报告和审定财务报表 `secondRightIcon` 道具没有。 仅 `valid` 图标被支持.

### v- 型号行为

频率 输入使用 a **类型断言** 模式:

-   **接受**数字 : `number | string | undefined` 作为投入
-   **输出**: 永远 `number | undefined` (从来没有) `string`(中文(简体) )

#### 类型

本部分接受 `number | string | undefined` 作为输入,但 **总是发出** `number | undefined`. Strings是自动解析的(意大利格式:"1.234,56"~1234.56)并内部转换为数字.

#### 折旧警告

**字符串值被贬值** 并将在未来的版本中删除。 使用字符串时显示控制台警告 。 请使用 `number | undefined` 而不是类型安全和未来的相容性.

#### 建议使用

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

// ✅ Recommended: number | undefined (future-proof)
const amount = ref<number | undefined>(undefined)
</script>

<template>
  <FzCurrencyInput label="Amount" v-model="amount" />
</template>
```

#### 折旧用法(仍在施工)

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

// ⚠️ Deprecated: string (still works but shows warning)
// Strings are parsed and converted to numbers internally
const amount = ref<string>("1234,56")
</script>

<template>
  <FzCurrencyInput label="Amount" v-model="amount" />
</template>
```

**说明**: 当使用字符串时, 组件将:

1.  显示调用控制台警告
2.  使用意大利格式解析字符串( 点=千, 逗号=小数)
3.  内部转换为数字
4.  总是发出一个 `number | undefined` 价值

#### 移徙指南

如果您正在使用字符串, 请移到数字 :

```vue
<!-- Before (deprecated) -->
<script setup lang="ts">
const amount = ref<string>("1234,56")
</script>

<!-- After (recommended) -->
<script setup lang="ts">
const amount = ref<number | undefined>(1234.56)
// or
const amount = ref<number | undefined>(undefined)
</script>
```

## 无障碍

FzInput和FzCurrencyInput完全可以访问,符合WCAG 2.1 AA标准:

-   **ARIA 属性**: 适当的aria- required, aria-invalid, aria-disabled, aria-labelledby, aria-descriptableby (英语)
-   **键盘导航**: 完整的键盘支持(Tab, Enter, Space, Arrow 键)
-   **屏幕阅读器**: 错误消息和帮助文本与输入有适当的关联
-   **重点管理**: 有适当对比的可见重点指标
-   **语义 HTML**: 具有适当标签关联的原生输入元素
-   **错误通知**: 错误消息使用角色=“ 提醒” 用于即时屏幕阅读器通知

### ARIA 属性

-   **需要的义和团**: 设置为"真"或"假"(Vue 3相容性的字符串值)
-   **无效**: 当错误道具属实时设定为“ true”
-   **离子障碍**: 当禁用道具属实时设置为" true"
-   **阿里亚-标签by**: 提供标签道具时与标签元素的链接
-   **阿里亚语描述**: 当前帮助文本或错误消息的链接

### 错误消息可访问性

错误消息以 `role="alert"` 以确保屏幕阅读器在显示时立即宣布.

## 行为和概念

### 标签对 Slot 优先级

当两者 `label` 提供了道具和标签插槽,插槽优先:

```vue
<FzInput label="This won't show">
  <template #label>This will show instead</template>
</FzInput>
```

### 右边图标显示顺序

该组件支持三种可以同时显示的右侧图标:

1.  **`valid` 检查标记** (当 `valid` 道具为 `true`) - 先显示
2.  **`secondRightIcon`** (提供时) - 显示于第二
3.  **`rightIcon`** (提供时) - 显示第三

所有三个图标都可以同时可见,从左到右都按这个顺序出现.

### 浮动标签占位符行为

在浮动标签变体中:

-   当输入为空且不突出重点时:占位符在输入上方显示为浮动文本
-   当输入有值或焦点时:占位符移动到输入上方
-   普通占位符属性隐藏于此模式

### 图标按钮大小映射

右图标按钮使用比输入小的尺寸来保持视觉平衡:

-   输入大小 `sm` — 图标按钮大小 `xs`
-   输入大小 `md` — 图标按钮大小 `sm`
-   输入大小 `lg` — 图标按钮大小 `md`

## 页:1

### 输入类型行为

不同的输入类型提供了不同的键盘布局和验证:

-   **电子邮件**: 触发移动设备上的电子邮件键盘
-   **电话**: 移动设备上的触发数键盘
-   **编号**: 允许带有自旋器控制的数值输入
-   **密码**: 面具输入字符
-   **url 密码**: 验证 URL 格式

### 货币输入格式

FzCurrency Input 使用 Intl. Number Format 用于本地化意识格式化. 格式格式格式格式 :

-   浏览器语言设置
-   最小和最大分数
-   十进制和千分法公约

### 用货币输入粘贴处理

货币输入使用智能heuristic分析粘贴值:

-   多个不同的分隔符: 最右边是小数分隔符
-   多个相同分隔符:千分隔符
-   单位分隔符, 后面为 < 3 位数: 小数分隔符
-   3+位数之后的单位分隔符:模糊,使用默认格式

## 常见问题

### @fiscozen/input 是什么？

设计系统输入部分

### 如何安装 @fiscozen/input？

在项目目录运行 npm install @fiscozen/input，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.4\.13）、tailwindcss（^3\.4\.1）、@fiscozen/icons（^1\.0\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fiscozen/input 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fiscozen\_\_input 是否存在。

### @fiscozen/input 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fiscozen/input 可以商用吗？

@fiscozen/input 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fiscozen/input 的下载量有多少？

根据 npm 官方下载统计，@fiscozen/input 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,164 次，日均约 105 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fiscozen/input 还在维护吗？

最新版本 3\.7\.0 发布于 2026/11/12（2 天前）；至今共发布 52 个版本，其中过去 12 个月发布了 31 个；首次发布于 2024/07/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。