# @dafcoe/vue-collapsible-panel 中文文档

规范地址：https://npmcn.com/package/%40dafcoe/vue-collapsible-panel/

版本：0\.2\.0
npm 元数据更新时间：2022-04-05T02:33:00.095Z
中文译文更新时间：2026-11-11T08:34:47.305Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1 MB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2021-03-17T18:02:47.614Z
- 最新版本发布：2021-04-14T17:30:53.388Z
- 近 30 天下载量：4631（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 0 个）

## 中文简介

使用 Vue3 的可折叠面板/内置

## 安装

```sh
npm install @dafcoe/vue-collapsible-panel
```

也可以使用：`pnpm add @dafcoe/vue-collapsible-panel`、`yarn add @dafcoe/vue-collapsible-panel`、`bun add @dafcoe/vue-collapsible-panel`

## README

[![@dafcoe/vue-collapsible-panel sample](https://github.com/dafcoe/vue-collapsible-panel/blob/main/src/assets/images/sample.gif?raw=true)](https://dafcoe.github.io/vue-collapsible-panel)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/@dafcoe/vue-collapsible-panel?style=flat-square) ![npm](https://img.shields.io/npm/dt/@dafcoe/vue-collapsible-panel?style=flat-square) ![GitHub package.json version](https://img.shields.io/github/package-json/v/dafcoe/vue-collapsible-panel?style=flat-square)

# @dafcoe/vue-collapsible-panel (英语)

方便使用,可自定义相撞面板/手风琴库使用Vue3所建.  
见它的行动 [演示](https://dafcoe.github.io/vue-colapsible-panel) 页 次.

## 安装

使用此软件包安装为项目依赖 `yarn` 或者说 `npm`数字 :

```
$ yarn add @dafcoe/vue-collapsible-panel

--- or ---

$ npm install --save @dafcoe/vue-collapsible-panel
```

## 使用量

导入 `VueCollapsiblePanelGroup` 财务报告和审定财务报表 `VueCollapsiblePanel` 组件,或全局(在您主.js / 主.ts文件中),或本地(在您的组件上):

```js
// Globally
import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
const app = createApp(App)
app.use(VueCollapsiblePanel).mount('#app')

// Locally
import {
  VueCollapsiblePanelGroup,
  VueCollapsiblePanel,
} from '@dafcoe/vue-collapsible-panel'
```

导入默认样式( 可选的 - 您可以定义自己的样式) :

```js
import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
```

在模板中使用如下:

```html
<vue-collapsible-panel-group>
    <vue-collapsible-panel>
        <template #title>
            Panel A Title
        </template>
        <template #content>
            Panel A Content
        </template>
    </vue-collapsible-panel>
    <vue-collapsible-panel>
        <template #title>
            Panel B Title
        </template>
        <template #content>
            Panel B Content
        </template>
    </vue-collapsible-panel>
    ...
</vue-collapsible-panel-group>
```

## 选项

#### 手风琴

默认情况下,手风琴行为不使用. 要使用它,请添加 `accordion` 打开 `vue-collapsible-panel-group`数字 :

```html
<vue-collapsible-panel-group accordion>
    ...
</vue-collapsible-panel-group>
```

#### 已扩展

默认情况下,所有面板都会被扩充. 为了防止这种情况,添加 `:expanded="false"` 打开 `vue-collapsible-panel`数字 :

```html
<vue-collapsible-panel-group>
    <vue-collapsible-panel :expanded="false">
        <template #title>
            Panel A Title
        </template>
        <template #content>
            Panel A Content
        </template>
    </vue-collapsible-panel>
    ...
</vue-collapsible-panel-group>
```

#### 颜色

默认基色为 `#333`。要修改此内容,请添加 `base-color="#<color>"` 打开 `vue-collpasible-panel-group`数字 :

```html
<vue-collapsible-panel-group base-color="#0035a0">
    ...
</vue-collapsible-panel-group>
```

对于颗粒控制颜色,以下 Css 变量可以被覆盖:

```css
--base-color
--border-color
--bg-color-header
--bg-color-header-hover
--bg-color-header-active
--bg-color-body
```

## 许可证

[MIT 许可证](https://opensource.org/licenses/MIT) © [达夫球](mailto:dafcoe@gmail.com)

## 常见问题

### @dafcoe/vue-collapsible-panel 是什么？

使用 Vue3 的可折叠面板/内置

### 如何安装 @dafcoe/vue-collapsible-panel？

在项目目录运行 npm install @dafcoe/vue-collapsible-panel，或使用 pnpm add / yarn add / bun add。

### @dafcoe/vue-collapsible-panel 支持 TypeScript 吗？

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

### @dafcoe/vue-collapsible-panel 支持 ESM 还是 CommonJS？

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

### @dafcoe/vue-collapsible-panel 可以商用吗？

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

### @dafcoe/vue-collapsible-panel 的下载量有多少？

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

### @dafcoe/vue-collapsible-panel 还在维护吗？

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