Panel 面板

废弃提示

由于使用场景有限,Panel 组件将在 3.0 版本中废弃,请直接使用 Cell 和 Button 组件代替

引入

  1. import Vue from 'vue';
  2. import { Panel } from 'vant';
  3. 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. <template #footer>
  4. <van-button size="small">按钮</van-button>
  5. <van-button size="small" type="danger">按钮</van-button>
  6. </template>
  7. </van-panel>

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-
icon标题左侧图标名称或图片链接string-

Slots

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

Panel 面板 - 图1