Panel 面板

引入

  1. import { Panel } from 'vant';
  2. Vue.use(Panel);

代码演示

基础用法

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

  1. <van-panel title="标题" desc="描述信息" status="状态">
  2. <div>内容</div>
  3. </van-panel>

高级用法

使用slot自定义内容

  1. <van-panel title="标题" desc="描述信息" status="状态">
  2. <div>内容</div>
  3. <div slot="footer">
  4. <van-button size="small">按钮</van-button>
  5. <van-button size="small" type="danger">按钮</van-button>
  6. </div>
  7. </van-panel>

API

Props

参数说明类型默认值版本
title标题String--
desc描述String--
status状态String--
icon标题左侧图标名称或图片链接,可选值见 Icon 组件String-1.3.8

Slots

名称说明
default自定义内容
header自定义 header
footer自定义 footer

Panel 面板 - 图1