FloatingPanel 浮动面板

介绍

浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。

引入

import { createApp } from 'vue';
import { FloatingPanel } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(FloatingPanel);

代码演示

基础用法

FloatingPanel 的默认高度为 100px，用户可以拖动来展开面板，使其高度达到 60% 的屏幕高度。

<van-floating-panel>
  <van-cell v-for="i in 26" :key="i" :title="'选项 ' + i" size="large" />
</van-floating-panel>

自定义锚点

通过 anchors 属性来设置 FloatingPanel 的锚点位置，并通过 v-model:height 来控制当前面板的显示高度。

<van-floating-panel :anchors="anchors" v-model:height="height">
  <div style="padding: 16px; text-align: center;">自定义锚点面板</div>
</van-floating-panel>

const viewportHeight = typeof window === 'undefined' ? 800 : window.innerHeight
const anchors = [100, Math.round(0.4 * viewportHeight), Math.round(0.7 * viewportHeight)]

仅头部拖拽

默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 content-draggable 属性来禁用内容区域的拖拽。

<van-floating-panel :content-draggable="false">
  <van-cell v-for="i in 26" :key="i" :title="'选项 ' + i" size="large" />
</van-floating-panel>

禁用拖拽

你可以通过 draggable 属性来禁用面板的拖拽功能。当设置为 false 时，面板将不可拖拽，同时头部拖拽栏也会被隐藏。

<van-floating-panel :draggable="false">
  <van-cell v-for="i in 26" :key="i" :title="'选项 ' + i" size="large" />
</van-floating-panel>

API

Props

参数	说明	类型	默认值
v-model:height	当前面板的显示高度	number | string	0
anchors	设置自定义锚点, 单位 px	number[]	[100, Math.round(0.6 * viewportHeight)]
duration	动画时长，单位秒，设置为 0 可以禁用动画	number | string	0.3
magnetic	是否启用磁力吸附到锚点。禁用后面板可在锚点边界范围内任意位置停留	boolean	true
content-draggable	允许拖拽内容容器	boolean	true
draggable	是否允许拖拽面板。禁用后头部拖拽栏会被隐藏	boolean	true
lock-scroll	当不拖拽时，是否锁定背景滚动	boolean	false
safe-area-inset-bottom	是否开启底部安全区适配	boolean	true

Events

事件名	说明	回调参数
height-change	面板显示高度改变且结束拖动后触发	{ height: number }

Slots

名称	说明
default	自定义面板内容
header	自定义面板标头

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-floating-panel-border-radius	16px	浮动面板的圆角大小
--van-floating-panel-header-height	30px	拖拽头部的高度
--van-floating-panel-z-index	999	浮动面板的层级
--van-floating-panel-background	var(--van-background-2)	浮动面板的背景色
--van-floating-panel-bar-width	20px	拖拽横条的宽度
--van-floating-panel-bar-height	3px	拖拽横条的高度
--van-floating-panel-bar-color	var(--van-gray-5)	拖拽横条的颜色