# @douxcode/vue-spring-bottom-sheet 中文文档

规范地址：https://npmcn.com/package/%40douxcode/vue-spring-bottom-sheet/

版本：3\.2\.0
npm 元数据更新时间：2026-03-23T23:46:42.347Z
中文译文更新时间：2026-11-12T19:36:55.194Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：43.8 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：vue \>=3\.3
- 首次发布：2024-12-25T22:40:14.530Z
- 最新版本发布：2026-03-23T23:46:42.016Z
- 近 30 天下载量：6503（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 10 个）

## 中文简介

Vue.js 的现代和表演底页

## 安装

```sh
npm install @douxcode/vue-spring-bottom-sheet
```

也可以使用：`pnpm add @douxcode/vue-spring-bottom-sheet`、`yarn add @douxcode/vue-spring-bottom-sheet`、`bun add @douxcode/vue-spring-bottom-sheet`

## README

# Vue 春季底页

😎 **现代** 和 **表演者** Vue.js 的底页

[演示](https://vue-spring-bottom-sheet.douxcode.com/) 👀

| ![](https://vue-spring-bottom-sheet.douxcode.com/example_basic.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_snap.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_blocking.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_sticky.png) |
| --- | --- | --- | --- |

# 安装

```
npm install @douxcode/vue-spring-bottom-sheet
```

```
bun install @douxcode/vue-spring-bottom-sheet
```

# 开始

## 基本用途

```vue
<script setup>
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
import { useTemplateRef } from 'vue'

const bottomSheet = useTemplateRef('bottomSheet')

const open = () => {
  bottomSheet.value.open()
}

const close = () => {
  bottomSheet.value.close()
}
</script>

<template>
  <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
</template>
```

## 基本用途 `setup` + TS 键

```vue
<script setup lang="ts">
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
import { ref } from 'vue'

const bottomSheet = ref<InstanceType<typeof BottomSheet>>()

/* For vue 3.5+ you can use useTemplateRef() */
const bottomSheet = useTemplateRef('bottomSheet')

const open = () => {
  bottomSheet.value.open()
}

const close = () => {
  bottomSheet.value.close()
}
</script>

<template>
  <BottomSheet ref="bottomSheet"> Your content </BottomSheet>
</template>
```

## 使用 v- 型号

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

import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'

const sheet = ref(false)
</script>

<template>
  <button type="button" @click="sheet = true">Open bottom sheet</button>
  <BottomSheet v-model="sheet"> Your content </BottomSheet>
</template>
```

## Nuxt 3 的使用量

对于 Nuxt 3, 只需将组件包入 `<ClientOnly>`

```vue
<template>
  <ClientOnly>
    <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
  </ClientOnly>
</template>
```

## 槽数

```vue
<template>
  <BottomSheet ref="bottomSheet">
    <template #header> Header </template>
    <div>Your content</div>
    <template #footer> Footer </template>
  </BottomSheet>
</template>
```

## CSS 自定义属性

```css
--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
--vsbs-background: #fff;
--vsbs-border-radius: 16px;
--vsbs-outer-border-color: transparent;
--vsbs-max-width: 640px;
--vsbs-border-color: rgba(46, 59, 66, 0.125);
--vsbs-padding-x: 16px;
--vsbs-handle-background: rgba(0, 0, 0, 0.28);
```

## 道具

### 提案定义

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 会期 | 数目 | 250号 | 以毫秒计的动画持续时间 |
| 坐标点 | 阵列 < 数 {}`${number}%`\> 翻译: | \[忍住地高\] | 自定义快取位置 |
| 首选项 | 数目 | 分钟高 | 初始坐标点索引 |
| 封锁 | 布尔 | 真实 | 与基本内容的块互动 |
| 可切换 | 布尔 | 真实 | 启用刷新到关闭手势 |
| 刷新屏障 | 数目 ++`${number}%` | "50%" (中文(简体) ) | 元素关闭的翻译量( px 或%) |
| 空投关闭 | 布尔 | 真实 | 允许根据背景结束 |
| 扩展关于 ContentDrag | 布尔 | 真实 | 通过拖曳内容允许扩展 |
| 远程端口 | 字符串 QQ 渲染元素 | 机构 | 传送到特定元素 |
| 电传端口 | 布尔 | 虚假 | 延后传送直到打开( 第 3. 5 起单) |
| 页眉分类 | 字符串 | '' | 设置标题元素类 |
| 内容分类 | 字符串 | '' | 设定内容元素类 |
| 页脚级 | 字符串 | '' | 设置页脚元素类 |
| 强月 | 布尔 | 虚假 | 强制挂载 DOM 中的底页 |

工作表体内部的互动内容保持其本土触摸行为. 输入和可编辑的内容不会启动工作表拖曳,自定义部件可以选择使用-vsbs-no-drag退出.

## 暴露的方法

假设有 `const bottomSheet = ref()`

| 方法 | 说明 | 示例 |
| --- | --- | --- |
| 打开 | 打开底页 | `bottomSheet.value.open()` |
| 关闭 | 关闭底页 | `bottomSheet.value.close()` |
| 抓取点 | 抓取到坐标点索引 | `bottomSheet.value.snapToPoint(1)` |

## 活动

| 活动 | 说明 | 有效载荷 |
| --- | --- | --- |
| 打开 | 工作表打开后发件 | \- 说吧 |
| 打开开始 | 当工作表开始打开时发出通知 | \- 说吧 |
| 关闭 | 工作表收尾时发送 | \- 说吧 |
| 关闭开始 | 工作表开始关闭时被放出 | \- 说吧 |
| 拖曳 | 用户向上拖动工作表时发送 | \- 说吧 |
| 拖动 | 用户向下拖动工作表时发送 | \- 说吧 |
| 直觉 | 内容高度变化时发件 | 高度(数目) |
| 崩溃 | 工作表完成后发出通知 | snapPointIndex(数量) |

## 承认

该项目的灵感来自:

-   [反应- 春季- 下行表](https://react-spring.bottom.sheet.dev/): 可访问 QQ, 愉快 QQ, & Fast QQ
-   [@webzlodimir/vue-bottom-sheet (英语)](https://github.com/vaban-ru/vue-bottom-sheet): QQ 以 Vue.js 和 Hammer.js 为 Vue 3 为基础的良好清洁和易触摸的底层工作表组件

## 常见问题

### @douxcode/vue-spring-bottom-sheet 是什么？

Vue\.js 的现代和表演底页

### 如何安装 @douxcode/vue-spring-bottom-sheet？

在项目目录运行 npm install @douxcode/vue-spring-bottom-sheet，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @douxcode/vue-spring-bottom-sheet 支持 TypeScript 吗？

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

### @douxcode/vue-spring-bottom-sheet 支持 ESM 还是 CommonJS？

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

### @douxcode/vue-spring-bottom-sheet 可以商用吗？

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

### @douxcode/vue-spring-bottom-sheet 的下载量有多少？

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

### @douxcode/vue-spring-bottom-sheet 还在维护吗？

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