# @dynamicforms/vuetify-inputs 中文文档

规范地址：https://npmcn.com/package/%40dynamicforms/vuetify-inputs/

版本：0\.15\.6
npm 元数据更新时间：2026-11-11T10:02:14.640Z
中文译文更新时间：2026-11-13T02:28:06.529Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dynamicforms/vuetify-inputs
原文对照：https://npmcn.com/package/%40dynamicforms/vuetify-inputs/?lang=original
项目主页：https://docs.velis.si/dynamicforms/vuetify-inputs
源码仓库：https://github.com/dynamicforms/vuetify-inputs

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

- 包体积（解压后）：1.4 MB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：vue ^3\.5\.2，vuetify ^3\.9，date-fns ^4\.1\.0，@mdi/font ^7\.4\.47，lodash-es ^4\.17\.12，@tiptap/pm ^3\.30\.2，@tiptap/core ^3\.30\.2，@tiptap/vue-3 ^3\.30\.2，vue-cached-icon ^3\.2\.0，@tiptap/starter-kit ^3\.30\.2，vue-markdown-render ^2\.2\.1，@tiptap/extension-link ^3\.30\.2，@dynamicforms/vue-forms ^3\.0\.0-alpha\.3，@tiptap/extension-image ^3\.30\.2，@tiptap/extension-table ^3\.30\.2，@dynamicforms/translatable ^0\.3\.0，@tiptap/extension-table-row ^3\.30\.2，@tiptap/extension-table-cell ^3\.30\.2，@tiptap/extension-text-align ^3\.30\.2，@tiptap/extension-placeholder ^3\.30\.2，@tiptap/extension-table-header ^3\.30\.2
- 首次发布：2025-04-18T06:45:18.472Z
- 最新版本发布：2026-11-11T10:02:14.403Z
- 近 30 天下载量：3463（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：98（近 12 个月 46 个）

## 中文简介

在所有形式字段——统一密度/可变系统——中保证视觉一致性的输入元件,全球可配置,内含表单元格模式. 建于 @ distractiveforms/ vue- forms 上.

## 安装

```sh
npm install @dynamicforms/vuetify-inputs
```

也可以使用：`pnpm add @dynamicforms/vuetify-inputs`、`yarn add @dynamicforms/vuetify-inputs`、`bun add @dynamicforms/vuetify-inputs`

## README

# @ difficialforms/ vuetify- inputs

在所有形式领域——统一密度/可变系统——确保视觉一致性, 全球可配置,表格单元格内含模式。 建造时间 [@ difficialforms/ vue- forms](https://github.com/dynamicforms/vue-forms)。 。 。 .

## 导言

`@dynamicforms/vuetify-inputs` 为数据输入提供输入组件, 构建后使每个组件匹配 每一个.

手递一个组件 [@ difficialforms/ vue- forms](https://github.com/dynamicforms/vue-forms) 和该要素 拥有值、 验证、 启用状态和能见度, 且组件会生成它持有的内容 。 每个 组件还使用平原 `v-model`或者没有约束性。 密度和变体系统以及内线模式 对于表格单元格来说,这三种情况都是一样的.

## 设计目标

这个图书馆的主要目标是 **视觉一致性**: 每一个输入组件都应该看起来和行为相同 不论使用哪个组件或该组件出现在应用程序中。 这意味着混合 `df-input`, (中文(简体) ), `df-select`, (中文(简体) ), `df-checkbox`, (中文(简体) ), `df-date-time`,而同一表格行上的其他人应产生一致、一致的结果 没有任何每个组件的调整.

为此,图书馆引入了 **密度/变量系统** 适用于所有组成部分:

-   **密度** 控制一个组件的垂直紧凑度,并可在全球范围设置,每部分注入,或 压倒每个组件。 支持的值为 `default`, (中文(简体) ), `comfortable`, (中文(简体) ), `compact`,以及 `inline`。 。 。 .
-   **备选案文** 控制视觉样式(例如:. `outlined`, (中文(简体) ), `underlined`, (中文(简体) ), `filled`, (中文(简体) ), `solo`,)并遵循同样的 等级.
-   这个 `inline` 密度是标准Vuetify之外的自定义扩展——它剥去标签和装饰,这样组件 使表单细胞内部清洁.

应用程序启动时可以通过 `VuetifyInputsSettings` 并通过Vue的传播 提供/插入,因此整个应用程序可以一次性地切换密度或变体.

这个 [密度示例](https://docs.velis.si/dynamicforms/vuetify-inputs/examples/density.html) 文档中 显示每个密度和变异组合中逐一生成的所有组件,以核实校正 一致的外观.

## 最重要的东西

-   **每个字段相匹配**:一个共享的基数,所以一行混合一个文本字段,一个选择,一个复选框和一个 选取日期的选取者不按每个组件调整
-   **符合表格单元格的密度**数字 : `default`, (中文(简体) ), `comfortable` 财务报告和审定财务报表 `compact` 属于Veitify的; `inline` 这是 库本身,并剥去其装饰的一字段,直到适合单元格内
-   **设定一次外观, 覆盖任何地方**:密度和变量从道克读取,然后从字段读取,然后从a读取 `provide` 从任何祖先,然后插件默认——最具体的先
-   **外地有自己的介绍**(单位:千美元) `@dynamicforms/vue-forms` 字段持有标签、提示、占位符, css 类,密度和它所绘制的变体,所以代码中声明的表单不需要显示属性 绘制它的标签

## 其他一切都一样

-   **12个组成部分**数字 : `df-input`, (中文(简体) ), `df-text-area`, (中文(简体) ), `df-select`, (中文(简体) ), `df-checkbox`, (中文(简体) ), `df-color`, (中文(简体) ), `df-date-time`, (中文(简体) ), `df-file`, (中文(简体) ), `df-image`, (中文(简体) ), `df-rtf-editor`, (中文(简体) ), `df-actions`, (中文(简体) ), `df-input-hint` 财务报告和审定财务报表 `df-input-group`
-   **一个控制器,一个V型模型,或者没有**: 约束元素拥有值,有效性,被触动,启用和能见度; `v-model` 向母体报告更改; 既不保留内值
-   **错误、提示和帮助文本** 一行,通过图书馆自己制造 `MessagesWidget`; 一个错误 作为纯文本、 减记或组件 `errorText` 设置其代码的返回和 段落,或作为英文 `detail`,通过一条规则显示一个应用程序可以替换——服务器一次, 一旦球场被打动
-   **带有图标、标记下、 HTML 或组件的标签**,通过 `Label` 班级, `MdString`, (中文(简体) ), `HtmlString` 财务报告和审定财务报表 `SimpleComponentDef`
-   **可见度** —— 说 `'full'`, (中文(简体) ), `'invisible'`, (中文(简体) ), `'hidden'`, (中文(简体) ), `'suppress'` - 和其后的增强能力 包含区域
-   **`passthroughAttrs`**: 基本 Vuetify 组件的任何道具, 不在此库中声明
-   **行动**页:1 `Action` 带有渲染选项的课, `defaultConfirm` 编号 : `defaultReject`现成的 关闭/是/没有工厂,每个断点都可以从 `xs` 改为 `xl`
-   **选择**: 静态选择或同步 `fetchChoices`,单键或多键,带有图标的芯片,自由值 `allowTags`
-   **上传**(单位:千美元) `FileComms` 有上传进度、删除和定期触摸的对象
-   **丰富文本**: TipTap 有 Vuetify 工具栏, 与其它输入相同
-   **可本地化**数字 : `translateStrings()`,或 `translate` 设置每个应用程序,连接库本身的字符串, 包括每个 RTF 编辑器工具栏标签和 `<df-image>`编号 :`<df-file>`上传和下载提示 应用程序的翻译功能 `errorText` 设置翻译出错; `DateTimeLocaleConfig`,或 `dateTimeLocale` 设置每个应用程序,设置日期fns locale日期格式化,并用 — 见 [本地化 实例](https://docs.velis.si/dynamicforms/vuetify-inputs/examples/localisation.html) 每把钥匙和工作 实例
-   **类型脚本**:每个组件的道具都是导出接口,定义与构建

## 安装

```bash
npm install @dynamicforms/vuetify-inputs
```

以你为主

```typescript
import { DynamicFormsInputs } from '@dynamicforms/vuetify-inputs';
import '@dynamicforms/vuetify-inputs/styles.css';

...
const app = createApp(MyApp);
app.use(router);
app.use(vuetify);
// registers the library for use and optionally inputs globally
app.use(DynamicFormsInputs, { registerComponents: true, registerVuetifyComponents: false });
```

## 基本用途示例

图书馆提供各种组成部分,包括:

```vue
<template>
  <div>
    <df-select
      :control="form.fields.country"
      :choices="countries"
      label="Select Country"
    />
    
    <df-text-area
      :control="form.fields.description"
      label="Description"
      :rows="5"
      :max-rows="10"
    />
    
    <df-file
      :control="form.fields.document"
      :comms="fileComms"
      label="Upload Document"
    />
  </div>
</template>

<script setup>
import { Group, Field } from '@dynamicforms/vue-forms';
import { DfSelect, DfTextArea, DfFile } from '@dynamicforms/vuetify-inputs';

// Create a form with fields
const form = new Group({
  country: new Field({ value: null }),
  description: new Field({ value: '' }),
  document: new Field({ value: null })
});

// Define options for the select field
const countries = [
  { id: 'us', text: 'United States' },
  { id: 'ca', text: 'Canada' },
  { id: 'uk', text: 'United Kingdom' },
  // more countries...
];

// Communication for file field
const fileComms = {
  upload: async (file, progressCallback) => {
    // Upload implementation
  },
  delete: async (fileId) => {
    // Delete implementation
  },
  touch: async (fileId) => {
    // Touch implementation
  }
};
</script>
```

## 文档

详细文件见 [https://docs.velis.si/ 动态形式/活化-输入](https://docs.velis.si/dynamicforms/vuetify-inputs)。 。 。 .

## 可用组件

-   **输入库**: 所有输入元素的基础组件
-   **Df 标签**: 绘制标签 - 纯文本、 标记下、 HTML 或组件, 并带有图标 - 每个输入方式 其本身
-   **df- 行动**: 一个动作组.
-   **df 检查框**: 复选框组件.
-   **df- 颜色**:一种颜色输入.
-   **df-日期-时间**: 带有可配置格式和类型的日期和时间选择组件.
-   **df 文档**: 带有进度指示的文件上传组件
-   **df-图像**: 带有预览、拖放和粘贴的图像上传
-   **df 输入**: 一般值输入.
-   **df 输入组**: 一个字段的框架,标签和信件行环绕多个输入,例如一组复选框
-   **df-输入点数**: 渲染一个字段或一个组的错误,倒回它的提示文本.
-   **df-tf-编辑器**: 一个RTF编辑器输入.
-   **df - 选择**: 支持静态或动态选项、多选项和标记的选定组件
-   **df 文本区**: 包含可配置行并验证的文本区组件

## 类型脚本支持

库用TypeScript来写,并提供了所有组件和接口的完整类型定义.

## 许可证

麻省理工学院

## 常见问题

### @dynamicforms/vuetify-inputs 是什么？

在所有形式字段——统一密度/可变系统——中保证视觉一致性的输入元件,全球可配置,内含表单元格模式\. 建于 @ distractiveforms/ vue- forms 上\.

### 如何安装 @dynamicforms/vuetify-inputs？

在项目目录运行 npm install @dynamicforms/vuetify-inputs，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.2）、vuetify（^3\.9）、date-fns（^4\.1\.0）、@mdi/font（^7\.4\.47）、lodash-es（^4\.17\.12）、@tiptap/pm（^3\.30\.2）、@tiptap/core（^3\.30\.2）、@tiptap/vue-3（^3\.30\.2）、vue-cached-icon（^3\.2\.0）、@tiptap/starter-kit（^3\.30\.2）、vue-markdown-render（^2\.2\.1）、@tiptap/extension-link（^3\.30\.2）、@dynamicforms/vue-forms（^3\.0\.0-alpha\.3）、@tiptap/extension-image（^3\.30\.2）、@tiptap/extension-table（^3\.30\.2）、@dynamicforms/translatable（^0\.3\.0）、@tiptap/extension-table-row（^3\.30\.2）、@tiptap/extension-table-cell（^3\.30\.2）、@tiptap/extension-text-align（^3\.30\.2）、@tiptap/extension-placeholder（^3\.30\.2）、@tiptap/extension-table-header（^3\.30\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dynamicforms/vuetify-inputs 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dynamicforms/vuetify-inputs 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dynamicforms/vuetify-inputs 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @dynamicforms/vuetify-inputs 可以商用吗？

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

### @dynamicforms/vuetify-inputs 的下载量有多少？

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

### @dynamicforms/vuetify-inputs 还在维护吗？

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