引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { FloatingPanel } from 'vant';

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

基础用法

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

<van-floating-panel>
  <van-cell-group>
    <van-cell
      v-for="i in 26"
      :key="i"
      :title="String.fromCharCode(i + 64)"
      size="large"
    />
  </van-cell-group>
</van-floating-panel>

自定义锚点

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

比如，使面板的高度在 100px、40% 屏幕高度和 70% 屏幕高度三个位置停靠：

<van-floating-panel v-model:height="height" :anchors="anchors">
  <div style="text-align: center; padding: 15px">
    <p>面板显示高度 {{ height.toFixed(0) }} px</p>
  </div>
</van-floating-panel>

import { ref } from 'vue';

export default {
  setup() {
    const anchors = [
      100,
      Math.round(0.4 * window.innerHeight),
      Math.round(0.7 * window.innerHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};

仅头部拖拽

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

<van-floating-panel :content-draggable="false">
  <div style="text-align: center; padding: 15px">
    <p>内容不可拖拽</p>
  </div>
</van-floating-panel>

Props

Events

Slots

类型定义

组件导出以下类型定义：

import type { FloatingPanelProps } from 'vant';

样式变量

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