• Panel 面板
    • 引入
  • 代码演示
    • 基础用法
    • 高级用法
  • API
    • Props
    • Slots

    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