Vant Weapp Panel 面板

2025-08-25 14:00 更新

引入

在app.json或index.json中引入组件,详细介绍见快速上手

"usingComponents": {
  "van-panel": "@vant/weapp/panel/index"
}

代码演示

基础用法

面板只是一个容器,里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">
  <view>内容</view>
</van-panel>

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">
  <view>内容</view>
  <view slot="footer">
    <van-button size="small">按钮</van-button>
    <van-button size="small" type="danger">按钮</van-button>
  </view>
</van-panel>

API

Props

参数 说明 类型 默认值
title 标题 string -
desc 描述 string -
status 状态 string -

Slot

名称 说明
- 自定义内容
header 自定义 header,如果设置了titledescstatus属性则不生效
footer 自定义 footer

外部样式类

类名 说明
custom-class 根节点样式类
header-class 头部样式类
footer-class 底部样式类


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号