# @digitalwalletcorp/vue-core 中文文档

规范地址：https://npmcn.com/package/%40digitalwalletcorp/vue-core/

版本：1\.6\.7
npm 元数据更新时间：2026-11-13T10:27:45.136Z
中文译文更新时间：2026-11-13T04:07:45.632Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40digitalwalletcorp/vue-core
原文对照：https://npmcn.com/package/%40digitalwalletcorp/vue-core/?lang=original
项目主页：https://github.com/digitalwalletcorp/vue-core
源码仓库：https://github.com/digitalwalletcorp/vue-core

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

- 包体积（解压后）：674 kB，164 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vue ^3\.5\.29，@nuxt/kit ^3\.17\.5，@digitalwalletcorp/vue-svg-icons ^1\.15\.3
- 首次发布：2026-09-26T18:40:12.470Z
- 最新版本发布：2026-11-13T10:27:44.934Z
- 近 30 天下载量：2327（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 32 个）

## 中文简介

Vue 3 的基本UI 组件

## 安装

```sh
npm install @digitalwalletcorp/vue-core
```

也可以使用：`pnpm add @digitalwalletcorp/vue-core`、`yarn add @digitalwalletcorp/vue-core`、`bun add @digitalwalletcorp/vue-core`

## README

# Vue 核心

Vue 3. 基本UI组件.

#### \* 特性

-   **树摇**:只导入您使用的东西。 导入单个组件不会捆绑图书馆的其余部分.
-   **易控**: 默认样式使用零特异性(`:where()`)),所以你自己的CSS总是获胜.

#### \* 安装

```bash
npm install @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons
# or
yarn add @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons
```

> ##### 所需经费
> 
> -   **Vue 3.5.29+ (英语)**: 道具与 Vue 键入 `ClassValue`,自Vue 3.5.29起出口.
> -   **@ 数码walletcorp/vue- svg- icons 1. 15.3+**: 用于组件中的图标.

#### 使用量

使用组件有三种方式.

|  | 何时使用 | 包装组件 |
| --- | --- | --- |
| [单项进口](https://npmcn.com/package/%40digitalwalletcorp/vue-core/#readme-1-import-components-individually) | 当您想要最小化捆绑大小或选择明确的导入时 | 只有您导入的组件 |
| [全球登记所有组件(Vue)](https://npmcn.com/package/%40digitalwalletcorp/vue-core/#readme-2-register-all-components-globally-vue) | 如果您想要使用组件而不在每个文件中导入它们 | 所有组件 |
| [全球注册组件( Nuxt)](https://npmcn.com/package/%40digitalwalletcorp/vue-core/#readme-3-register-components-globally-nuxt) | 当您想要在 Nuxt 项目中在全球使用组件时 | 只有您使用的组件 |

##### 1\. 单独进口部件

```vue
<script setup lang="ts">
import { CopyButton } from '@digitalwalletcorp/vue-core';
</script>

<template>
  <CopyButton value="Order #12345" />
</template>
```

##### 2\. 在全球登记所有组成部分(Vue)

```ts
// main.ts
import { createApp } from 'vue';
import { registerComponents } from '@digitalwalletcorp/vue-core/register';
import App from './App.vue';

const app = createApp(App);
registerComponents(app);
app.mount('#app');
```

##### 3\. 全球登记册组成部分(纳克特)

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@digitalwalletcorp/vue-core/nuxt']
});
```

##### QQ 类型

每个组件的道具、事件和槽作为命名类型导出 `<Component>Props`, (中文(简体) ), `<Component>Emits` 财务报告和审定财务报表 `<Component>Slots`,例如 `ModalDialogProps` 财务报告和审定财务报表 `ModalDialogEmits`。 。 。 . 将组件包裹在自己的组件中时使用.

```vue
<script setup lang="ts">
import { ModalDialog } from '@digitalwalletcorp/vue-core';
import type { ModalDialogProps } from '@digitalwalletcorp/vue-core';

const props = defineProps<ModalDialogProps>();
</script>

<template>
  <ModalDialog v-bind="props" class="app-dialog" />
</template>
```

##### QQ 样式表

导入样式表以确保默认对齐和图标样式.

-   **阴:** 导入您的条目文件 .

```ts
// main.ts
import '@digitalwalletcorp/vue-core/style.css';
import '@digitalwalletcorp/vue-svg-icons/style.css'; // Required for components using icons from vue-svg-icons
```

-   **数值 :** 添加到您的配置数组中 .

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@digitalwalletcorp/vue-core/style.css',
    '@digitalwalletcorp/vue-svg-icons/style.css' // Required for components using icons from vue-svg-icons
  ]
});
```

> **XQ 图标样式**
> 
> 诸如: `AccordionFieldset` 依赖 [@digitalwalletcorp/vue-svg-icons (中文(简体) )](https://www.npmjs.com/package/@digitalwalletcorp/vue-svg-icons)。导入其样式表可确保图标与文本保持一致.

##### • 大小

文本周围的空格,如垫子、空白和边距,设置在 `em`,这样它们就可以跟随您的应用程序的字体大小. 默认是 `em` 在字体大小为 `12px`。 。 。 . 线条元素(边框、轮廓、阴影)和非文本组件大小设置在 `px`。 。 。 .

| ưμ㼯a | 计划 |
| --- | --- |
| 2个 | 0.17 (中文(简体) ) |
| 3个 | 0.25 (中文(简体) ) |
| 页:1 | 0.33 (中文(简体) ) |
| 页:1 | 0.4 (中文(简体) ) |
| 6个 | 0.5 (韩语) |
| 第8条 | 0.67 (中文(简体) ) |
| 10个 | 0.83 (中文(简体) ) |
| 第12条 | 1个 |
| 页:1 | 1.17 联合国 |
| 16个 | 1.33 国家 |
| 第 18 条 | 1\. 5个 |
| 20国 | 1.67 (中文(简体) ) |
| 22个 | 1.83 (中文(简体) ) |
| 第28条 | 第2.33条 |
| 30个 | 2.5 国家 |

##### 适应您的应用程序

**QQ 暗模式和主题支持**

组件会自动适应您的应用程序的色彩策略( 在本地支持光和暗模式) .

-   **跟随OS设置 :** 添加 `:root { color-scheme: light dark; }` 您的全球CSS.
-   **自定义主题切换 :** 改变CSS `color-scheme` 属性在 `:root` 或母容器(例如, `color-scheme: dark`) (中文(简体) ). 这些组件将自动切换.
-   **无主题切换 :** 添加 `:root { color-scheme: light; }` 到您的全局CSS,组件以光模式显示.

> ⚠️ **声明 `color-scheme` 即使你不切换主题** 此库使用 CSS `light-dark()` 函数用于主题。 一些构建工具,当优化旧浏览器时,需要 `color-scheme` 声明以正确处理这些样式。 没有它,默认样式(如背景和边框)可能在生产建设中缺失,即使它们在开发服务器上出现正确. 为了防止这种情况,请声明 `color-scheme` 在您的全球CSS.

**自定义样式( E)`--dwui-*` 变量)**

默认样式使用 CSS 变量(`--dwui-*`)和零特性选择器(`:where()`),使其易于被推翻. 每个组件的变量列于其文档中. [文档/dwui-变量.css](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/dwui-variables.css) 列出所有带有默认值,按它们所适用的组件分组。 将您想要更改的行复制为自己的 `dwui-variables.css`。 。 。 .

以下默认样式不使用 `:where()`。要推翻它们,请使用更具体的CSS规则.

| 构成部分 | 样式 | 原因 |
| --- | --- | --- |
| [`ScreenLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | `outline` 重点 | 装载不接受用户交互,因此不显示焦点环. |

我们建议建立一个 `dwui-variables.css` 将您的应用程序设计符号映射到库中的文件 `--dwui-*` 变量,然后在库样式表后导入。 如果你同时使用 `vue-forms` 财务报告和审定财务报表 `vue-core`,可以使用单曲 `dwui-variables.css` 用于两个库的文件,因为它们共享常见变量,如用于焦点环的变量.

```css
/* dwui-variables.css */
:root {
  --dwui-background-tab-header: var(--app-tab-header-background);
  --dwui-color-text-tab-header: var(--app-tab-header-text);
  --dwui-background-tab-header-selected: var(--app-tab-header-selected-background);
  --dwui-color-text-tab-header-selected: var(--app-tab-header-selected-text);
}
```

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@digitalwalletcorp/vue-core/style.css',
    '@digitalwalletcorp/vue-svg-icons/style.css',
    '@/assets/css/default.css', // your global CSS
    '@/assets/css/dwui-variables.css'
  ]
});
```

**QQ 全应用程序选项`VueCore`(中文(简体) )**

每个页面上相同的设置,例如: `DataTable` 或小吃栏上的时间段,可以对整个应用程序设定一次,而不是传递给每个组件. 安装 `VueCore` 插件为 `app.use` 把选择权交给它. 一个道具胜过全应用程序的值,如果没有两者之一,则使用库的默认值.

```ts
// Vue: main.ts
import { VueCore } from '@digitalwalletcorp/vue-core';

app.use(VueCore, {
  dataTable: {
    labels: { totalCount: 'Total', totalUnit: 'records', noData: 'No data' },
    sortMode: 'page'
  }
});
```

```ts
// Nuxt: plugins/vue-core.ts
import { VueCore } from '@digitalwalletcorp/vue-core';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueCore, {
    dataTable: {
      labels: { totalCount: 'Total', totalUnit: 'records', noData: 'No data' },
      sortMode: 'page'
    },
    snackbar: {
      // The timezone the user selected. A ref or a function is read each time a snackbar is shown.
      timezone: () => userSession.timezone
    }
  });
});
```

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `dataTable` | `DataTableOptions` | 设置默认道具 [`DataTable`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md) 整个应用程序的组件。 例如,可以配置默认标签或排序行为. |
| `snackbar` | `SnackbarOptions` | 设置默认值 `timezone` 在小吃栏上显示的时间,作为字符串、参考或返回它的函数。 它适用于显示在 [`useSnackbar()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/snackbar.md) 转至 `CopyButton`。 。 。 . |
| `csv` | `CsvOptions` | 设置 CSV 下载的默认值 `DataTable`,例如分隔符、编码和确认对话框的文本。 它适用于: [`useDataTableDownload()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md)。 。 。 . |

安装 `VueCore` 还连接从代码显示的对话框、窗口和小吃栏到您的应用程序,所以插件和 `provide`d 值,如i18n或内部的商店. 仅需此选项即可安装 .

要设定只用于部分应用程序的选项, `provide` 他们与 `vueCoreOptionsKey` 包含在以上组件中.

#### QQ 帮助函数

对话框,小吃栏和浮动窗口从代码中显示,这样您就可以从点击处理器或商店动作中调用它们,而不将组件放入模板.

```ts
import { showConfirmationDialog, showSnackbar } from '@digitalwalletcorp/vue-core';

const onClickDelete = async () => {
  const result = await showConfirmationDialog('Do you want to delete this item?', { title: 'Delete item' });
  if (result === 'yes') {
    await deleteItem();
    showSnackbar('The item has been deleted.', { duration: 5000 });
  }
};
```

| 函数 | 说明 |
| --- | --- |
| [`showInformationDialog()` 编号 : `showConfirmationDialog()` 编号 : `showWarningDialog()` 编号 : `showErrorDialog()` 编号 : `showModalDialog()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/modal-dialog.md) | 显示带有消息的模式对话框并返回用户选择的按钮 . |
| [`showSnackbar()` 编号 : `closeAllSnackbars()` 编号 : `useSnackbar()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/snackbar.md) | 在屏幕边缘显示短消息. |
| [`showOverlayBox()` 编号 : `closeAllOverlayBoxes()` 编号 : `useOverlayBox()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/overlay-box.md) | 在其中显示组件 `OverlayBox` 并返回一个把手来关闭它. |
| [`showFloatingComponent()` 编号 : `showFloatingMessage()` 编号 : `closeAllFloatingComponents()` 编号 : `useFloatingComponent()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/floating-component.md) | 在没有背景背景的窗口中显示一个组件或信息. |
| [`showScreenLoading()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | 用旋转器覆盖整个屏幕,直到返回的把手被关闭. |
| [`downloadDataTablePage()` 编号 : `downloadDataTableAll()` 编号 : `dataTableToCsv()` 编号 : `useDataTableDownload()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md) | 保存一行 `DataTable` 作为 CSV 文件. |
| [`headersToCsvColumns()` 编号 : `rowToCsvColumns()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md) | 转换 `DataTable` 页眉并行入CSV列. |
| [`saveFile()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/helpers/file.md) | 保存一个 `Blob`,一个 `ArrayBuffer` 或数据 URL 作为文件通过浏览器的下载. |
| [`resolveLabel()`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/helpers/label.md) | 返回一个文本 `LabelText`,或返回字符串的函数. |

帮助您执行组件的函数,例如等待元素出现或找到第一个聚焦的字段,列在 [组件助手](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/helpers/component.md)。 。 。 .

许多组件和助手函数接受文本标签为 `LabelText`,这是 `string` 函数 `() => string`。 。 。 . 通过一个函数,可以提供动态文本,以更新应用程序的语境,例如在使用i18n库时. 见 [标签助手](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/helpers/label.md) 更多细节.

#### 组件

| 构成部分 | 说明 |
| --- | --- |
| [`AccordionFieldset`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/accordion-fieldset.md) | 一个字段集,其内容可以从传说中崩溃并扩展. |
| [`AccordionSection`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/accordion-section.md) | 其内容可被倒塌并被扩展的区域,其下有切换按钮. |
| [`CopyButton`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/copy-button.md) | 复制一个值到剪贴板的按钮 . |
| [`DarkModeSelector`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/dark-mode-selector.md) | 一个在光和暗模式之间切换并记住选择的开关. |
| [`DataTable`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/data-table.md) | 用于记录列表的表格,其中包含可排序和可重排标题、行选择和呼号控制. |
| [`DiffText`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/diff-text.md) | 按字符比较两个字符串,并显示不同颜色的添加,去除和不变字符. |
| [`HelpButton`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/help-button.md) | 一个问题标记按钮,在按钮旁边的弹出式显示其内容. |
| [`HelpPopper`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/help-popper.md) | 一个问题标记图标,在徘徊或聚焦时在工具提示中显示其内容. |
| [`HighlightText`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/highlight-text.md) | 显示与突出显示的单词匹配的每个部分的文本. |
| [`HourglassLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/hourglass-loading.md) | 显示一个小时玻璃来代替正在装入的值. |
| [`IntersectionLazyComponent`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/intersection-lazy-component.md) | 其内容只在滚动到视图时才会显示. |
| [`LabelIcon`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-icon.md) | 同时显示图标和文本标签. |
| [`LabelButton`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-button.md) | 渲染包含图标和文本标签的按钮. |
| [`ModalDialog`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/modal-dialog.md) | 一个显示消息并要求用户用其按钮回答的对话框 . |
| [`OverlayBox`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/overlay-box.md) | 一个窗口显示在覆盖整页的暗淡背景上,带有标题和关闭按钮. |
| [`PageSection`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/page-section.md) | 以一页为标题的一节. |
| [`PageTitle`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/page-title.md) | 页面的标题栏,右侧有默认槽的内容. |
| [`ScreenLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | 以暗淡的背景覆盖整个屏幕,并显示一个回旋器. |
| [`TabGroup` 编号 : `TabContent`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/tab-group.md) | 在内容之间切换带有标签头的内容. |
| [`WarningPopper`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/warning-popper.md) | 在徘徊或聚焦时以工具提示显示其内容的警告图标 . |

#### 许可证

这个项目根据麻省理工学院的许可证获得许可。 见 [自由主义](https://opensource.org/licenses/MIT) 详细文件.

## 常见问题

### @digitalwalletcorp/vue-core 是什么？

Vue 3 的基本UI 组件

### 如何安装 @digitalwalletcorp/vue-core？

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

### @digitalwalletcorp/vue-core 支持 TypeScript 吗？

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

### @digitalwalletcorp/vue-core 支持 ESM 还是 CommonJS？

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

### @digitalwalletcorp/vue-core 可以商用吗？

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

### @digitalwalletcorp/vue-core 的下载量有多少？

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

### @digitalwalletcorp/vue-core 还在维护吗？

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