# @enos5/enos-vue-default 中文文档

规范地址：https://npmcn.com/package/%40enos5/enos-vue-default/

版本：2\.0\.10
npm 元数据更新时间：2026-11-11T15:34:47.947Z
中文译文更新时间：2026-11-13T23:54:16.006Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40enos5/enos-vue-default
原文对照：https://npmcn.com/package/%40enos5/enos-vue-default/?lang=original

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

- 包体积（解压后）：10.5 MB，94 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue ^3\.4\.0，vue-i18n ^11\.0\.0，@inertiajs/vue3 ^2\.0\.0 \|\| ^3\.0\.0
- 首次发布：2026-04-07T15:24:11.103Z
- 最新版本发布：2026-11-11T15:34:47.624Z
- 近 30 天下载量：2822（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：124（近 12 个月 124 个）

## 中文简介

来自 Enos 的共享 Vue 3 UI 组件,被包装为 monrepo 内部的默认工作空间.

## 安装

```sh
npm install @enos5/enos-vue-default
```

也可以使用：`pnpm add @enos5/enos-vue-default`、`yarn add @enos5/enos-vue-default`、`bun add @enos5/enos-vue-default`

## README

# `@enos5/enos-vue-default`

来自 Enos 的共享 Vue 3 UI 组件,被包装为 monrepo 内部的默认工作空间.

## 所需资源

-   节点.js 20+
-   无

## 安装

从工作空间根 :

```bash
npm install
```

构建此软件包 :

```bash
npm run build -w @enos5/enos-vue-default
```

## 在另一个工程中使用

安装已发布的软件包 :

```bash
npm install @enos5/enos-vue-default
```

此软件包预计消费应用中的这些对等依赖性 :

-   `vue`
-   `@inertiajs/vue3` (单位:千美元)`^2.0.0` 或者说 `^3.0.0`(中文(简体) )
-   `@heroicons/vue`
-   `vue-i18n`

丰富的文本支持使用"TinyMCE"并被捆绑作为这个库中的常规依赖. 组件设定镜像 Jetstream 软件包,但 `ApplicationLogo`, (中文(简体) ), `AuthenticationCard`, (中文(简体) ), `Banner`, (中文(简体) ), `NavGroup`, (中文(简体) ), `NavLink`, (中文(简体) ), `NavMenu`,以及 `ResponsiveNavLink`。 。 。 .

你可以在全球注册:

```ts
import { createApp } from 'vue'
import App from './App.vue'
import { EnosVueDefault } from '@enos5/enos-vue-default'

createApp(App).use(EnosVueDefault).mount('#app')
```

或导入单个组件:

```ts
import { Button, ColorPicker, TextInput } from '@enos5/enos-vue-default'
```

`ColorPicker` 解析其内置的 UI 标签 `vue-i18n` 使用英文副本作为密钥。 如果您的应用程序想要本地化的拾取者染色体, 请定义密钥的翻译, 如 `Color`, (中文(简体) ), `Selected color`, (中文(简体) ), `Pick color from screen`, (中文(简体) ), `Hue`, (中文(简体) ), `Opacity`, (中文(简体) ), `Hex value`, (中文(简体) ), `Saturation and brightness for {color}`,以及 `Rainbow color area for {color}`。 。 。 .

`DateInput` 财务报告和审定财务报表 `DateRangeInput` 默认为英语语言行为 。 过 `locale` 来覆盖它,对于本地浏览器日期字段,请记住最后的取取器 UI 仍然是由浏览器控制的, 并且 `lang` 用作语言提示.

样式在导入包入口时自动被加载,因此消费者不必记住单独的 CSS 导入.

如果一个耗用过的app想要更早的样式表加载 `npm run dev`,它可以明确选择进入稳定样式表条目:

```ts
import '@enos5/enos-vue-default/styles.css'
```

这种明确的进口是可选的。 它主要改进了dev-mode的先涂料,并避免从 `dist` 直接说.

## 表格列控件

`TableList` 除非启用了新的控件,否则将保留其现有行为:

```vue
<script setup>
import { ref } from 'vue'
import { TableList } from '@enos5/enos-vue-default'

const hiddenColumns = ref(['brand'])
const columns = [
  { key: 'name', label: 'Name', hideable: false },
  { key: 'brand', label: 'Brand' },
  { key: 'status', label: 'Status', sticky: 'right', width: '8rem' },
]
</script>

<template>
  <TableList
    v-model:hidden-columns="hiddenColumns"
    :columns="columns"
    :data="rows"
    column-visibility
    sticky-actions
  >
    <template #actions="{ item }">
      <!-- row actions -->
    </template>
  </TableList>
</template>
```

-   `sticky-actions` 保持专注 `actions` 水平滚动时在右边缘可见槽列,将多按钮组保留在一行上,并右对齐整组.
-   `column.sticky: 'right'` (或 `true`)将固定数据栏标出。 普通列可以通过其命名的槽来制作自定义按钮,但它仍然有别于专用的 `actions` 插槽栏。 多个粘相列自动计算出它们的右偏移.
-   `column-visibility` 显示内置设置按钮和对话框.
-   `v-model:hidden-columns` 控制隐藏的列键。 没有模型, `column.hidden: true` 供给最初的内部状态.
-   `column.hideable: false` 在设置对话框中省略所需的一栏.
-   复选框和“显示所有”更改仍为草稿,直到用户用“OK”确认为止。 取消,逃脱,背景解职 放弃了草案.
-   这个 `columnVisibility*` 标签道具将按钮、标题、描述、“全部显示”,应用,并取消标签.

`TableListForm` 支持同样的 `sticky-actions` 螺旋桨和 `column.sticky: 'right'` 行为 列能见度被故意限制在 `TableList` 因此,正在编辑的字段不能从可编辑行中消失.

## 发布 到 npm 时

在发布前, 构建包并验证焦油球 :

```bash
npm run build -w @enos5/enos-vue-default
npm pack --dry-run -w packages/default
```

然后将版本打入 `packages/default/package.json`并公布工作空间

```bash
npm publish -w packages/default --access public
```

此套件的首次公开发布需要 `--access public`。当软件包在 npm 上存在后,随后的发布可以使用相同的命令.

## 浮动动作提示

`FloatingActionHint` 可以在默认包中找到。 它需要一个独特的 `id`页:1 `label`,则a `description`设置默认槽 `descriptionId` 行动 `aria-describedby`。提示打开了悬浮或焦点,关闭了逃逸或离开动作,并跟踪查看器重新大小和容器滚动。 其内容被传送到 `body` 避免被祖先的容器剪接.

```vue
<script setup lang="ts">
import { FloatingActionHint } from '@enos5/enos-vue-default'
</script>

<template>
  <FloatingActionHint
    id="save-action-hint"
    label="Save"
    description="Save your changes without leaving this page."
  >
    <template #default="{ descriptionId }">
      <button type="button" :aria-describedby="descriptionId">Save</button>
    </template>
  </FloatingActionHint>
</template>
```

可运行的用法示例见 `examples/FloatingActionHint.vue`。 。 。 .

## 文件上传

使用 `InputGroup` 与 `type="file"` 用于没有当前图像预览的上传控制。 它默认接受任何文件类型. 过 `accept` 用逗号分隔的扩展或MIME类型限制取取浏览器.

```vue
<script setup>
import { ref } from 'vue'
import { InputGroup } from '@enos5/enos-vue-default'

const attachment = ref(null)
</script>

<template>
  <InputGroup
    v-model="attachment"
    type="file"
    label="Attachment"
    accept=".pdf,.docx"
  />
</template>
```

模型收到一个 `File` 或者说 `null`。拾取器过滤器不会取代服务器侧文件验证. `FileInput` 也可作为一个独立的组成部分.

## 响应表格搜索

`TableSearch` 从容器中大小,包括侧边栏和 面板 。 1280px以下, 搜索输入位于过滤器上方; 过滤网格 在狭长的电话上安装一列,并在空间允许时添加一列。 1280px 和 (英语) 更宽, 搜索输入和所有过滤字段共享一行, 空间更多 为过滤器保留,搜索输入封顶于40rem。 删除的切换 并且结果计数在右边一致,垂直地以搜索行为中心. 打开 更小的容器会堆放在搜索和过滤器下面。 在平板电脑上 容器,切换和计数它们之间的空格 计数坐在切换下方。 长问摘要包. `search-fields-layout="stacked"` 将搜索置于额外字段之上.

直接将字段传递到槽; 包装器使用自动配置网格 :

```vue
<TableList
  v-model:search-value="search"
  :data="users"
  :columns="columns"
  search
  :search-show-deleted-toggle="true"
  :search-show-deleted="showDeleted"
  @update:search-show-deleted="showDeleted = $event"
  :search-ui="{
    input: 'min-w-[min(100%,16rem)] flex-[2_1_24rem]',
    fields: 'grid min-w-[min(100%,12rem)] flex-1 gap-3 sm:grid-cols-2',
  }"
>
  <template #search-fields>
    <InputGroup v-model="role" type="select" :options="roles" />
    <InputGroup v-model="status" type="select" :options="statuses" />
  </template>
</TableList>
```

使用 `ui` 打开 `TableSearch` 直接,或 `search-ui` 打开 `TableList`。每个键接受 a Vue 类值(字符串、数组或对象),并替换包件默认值 课程。 未指定的密钥保留其默认值 。 不需要内部选择器 .

| 密钥 | 目标 |
| --- | --- |
| `root` | 搜索卡样式; 倒回现有的 `card-class` 道具 |
| `layout` | 货场和管制集装箱 |
| `content` | 集装箱进行搜索和额外作业 |
| `input` | 搜索输入组根包 |
| `fields` | 额外的字段网格包装器 |
| `controls` | 删除了切换、 自定义控制槽和全部组 |
| `toggle` | 删除切换包 |
| `count` | 结果计数和查询摘要包 |

这个名字 `@container/table-search` 即使当 `ui.root` 实值 ,因此普通的被命名的容器变体仍可用于覆被. 变化类不改变过滤,模型,事件,或服务器/客户端模式.

### 日期 Week 输入

选择日历周 `v-model="week"`时 `week` 实值 `{ start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }`设置 `week-starts-on` 改为 `0` (星期日,默认)或 `1` (星期一) (英语). 这个 `filter` 回调收到一周,然后返回是否可以选择. `locale`, (中文(简体) ), `placeholder`,以及 `disabled` 也得到支持.

`DateRangeInput` 还接受 `week-starts-on`数字 : `0` 星期日( 默认) 或 `1` 周一的时候 这控制了工作日标题和日历网格. `DateInput` 使用浏览器本地拾取器,而不控制其周始.

## 常见问题

### @enos5/enos-vue-default 是什么？

来自 Enos 的共享 Vue 3 UI 组件,被包装为 monrepo 内部的默认工作空间\.

### 如何安装 @enos5/enos-vue-default？

在项目目录运行 npm install @enos5/enos-vue-default，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.4\.0）、vue-i18n（^11\.0\.0）、@inertiajs/vue3（^2\.0\.0 \|\| ^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @enos5/enos-vue-default 支持 TypeScript 吗？

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

### @enos5/enos-vue-default 支持 ESM 还是 CommonJS？

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

### @enos5/enos-vue-default 可以商用吗？

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

### @enos5/enos-vue-default 的下载量有多少？

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

### @enos5/enos-vue-default 还在维护吗？

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