Vue 春季底页
😎 现代 和 表演者 Vue.js 的底页
演示 👀
 |  |  |  |
|---|
安装
npm install @douxcode/vue-spring-bottom-sheet
bun install @douxcode/vue-spring-bottom-sheet
开始
基本用途
<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 键
<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- 型号
<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>
<template>
<ClientOnly>
<BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
</ClientOnly>
</template>
槽数
<template>
<BottomSheet ref="bottomSheet">
<template #header> Header </template>
<div>Your content</div>
<template #footer> Footer </template>
</BottomSheet>
</template>
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(数量) |
承认
该项目的灵感来自:
- 反应- 春季- 下行表: 可访问 QQ, 愉快 QQ, & Fast QQ
- @webzlodimir/vue-bottom-sheet (英语): QQ 以 Vue.js 和 Hammer.js 为 Vue 3 为基础的良好清洁和易触摸的底层工作表组件