## Panel 面板 ### 使用指南如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。 #### 全局注册你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了： ```js import Vue from 'vue'; import { Panel } from 'vant'; import 'vant/lib/vant-css/panel.css'; Vue.component(Panel.name, Panel); ``` #### 局部注册如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`： ```js import { Panel } from 'vant'; export default { components: { 'van-panel': Panel } }; ``` ### 代码演示 #### 基础用法面板只是一个容器，里面可以放入自定义的内容。 :::demo 基础用法 ```html

panel内容

``` ::: #### 高级用法使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。 :::demo 高级用法 ```html

商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余

¥ 2.00

商品sku

x 2

合计：¥ 1999.90

按钮一

按钮二

``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | title | 标题 | `string` | | | | desc | 描述 | `string` | | | | status | 状态 | `string` | | | ### Slot | name | 描述 | |-----------|-----------| | - | 自定义内容 | | header | 自定义header | | footer | 自定义footer |