[breaking change] Panel: rewrite

example/app.wxss

@@ -11,7 +11,7 @@ page {
 }
 
 .demo-margin-right {
-  margin-right: 15px;
+  margin-right: 10px;
 }
 
 .demo-margin-bottom {

example/pages/panel/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Panel 面板",
   "usingComponents": {
-    "van-panel": "../../dist/panel/index"
+    "demo-block": "../../components/demo-block/index",
+    "van-panel": "../../dist/panel/index",
+    "van-button": "../../dist/button/index"
   }
 }

example/pages/panel/index.wxml

@@ -1,11 +1,15 @@
-<van-panel class="panel-example">
+<demo-block title="基础用法">
-  <view style="padding: 15px;">PANEL 内容区域</view>
+  <van-panel title="标题" desc="描述信息" status="状态">
-</van-panel>
+    <view class="content">内容</view>
+  </van-panel>
+</demo-block>
 
-<van-panel title="标题" class="panel-example">
+<demo-block title="高级用法">
-  <view style="padding: 15px;">带有标题的 PANEL</view>
+  <van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
-</van-panel>
+    <view class="content">内容</view>
-
+    <view slot="footer" class="footer">
-<van-panel title="标题" hide-border="{{ true }}" class="panel-example">
+      <van-button size="small" custom-class="demo-margin-right">按钮</van-button>
-  <view style="padding: 15px;">无边框的panel</view>
+      <van-button size="small" type="danger">按钮</van-button>
-</van-panel>
+    </view>
+  </van-panel>
+</demo-block>

example/pages/panel/index.wxss

@@ -1,4 +1,8 @@
-.panel-example {
+.content {
-  display: block;
+  padding: 20px;
-  margin-top: 15px;
+  font-size: 16px;
+}
+
+.footer {
+  text-align: right;
 }

packages/button/index.pcss

@@ -10,6 +10,7 @@
   box-sizing: border-box;
   font-size: 16px;
   text-align: center;
+  vertical-align: middle;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 

packages/panel/README.md

@@ -1,25 +1,58 @@
-## Panel 面板组件
+## Panel 面板
 
 ### 使用指南
 在 index.json 中引入组件
 ```json
-{
+"usingComponents": {
-  "usingComponents": {
+  "van-panel": "path/to/vant-weapp/dist/panel/index"
-    "van-panel": "path/to/vant-weapp/dist/panel/index"
-  }
 }
 ```
 
 ### 代码演示
-Panel 提供了一块白色的展示区域，使用方式如下
+
+#### 基础用法
+面板只是一个容器，里面可以放入自定义的内容
+
 ```html
-<van-panel title='我是标题'>
+<van-panel title="标题" desc="描述信息" status="状态">
   <view>内容</view>
 </van-panel>
 ```
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
-|-----------|-----------|-----------|-------------|-------------|
-| title | panel的标题 | String | - | |
-| hide-border | 内容区隐藏边框 | Boolean | - | |
 
+#### 高级用法
+使用`slot`自定义内容
 
+```html
+<van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
+  <view>内容</view>
+  <view slot="footer">
+    <van-button size="small">按钮</van-button>
+    <van-button size="small" type="danger">按钮</van-button>
+  </view>
+</van-panel>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| title | 标题 | `String` | - |
+| desc | 描述 | `String` | - |
+| status | 状态 | `String` | - |
+| use-footer-slot | 是否使用 footer slot | `Boolean` | `false` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 自定义内容 |
+| header | 自定义 header，如果设置了`title`、`desc`、`status`属性则不生效 |
+| footer | 自定义 footer，需要设置 `use-footer-slot`属性 |
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| header-class | 头部样式类 |
+| footer-class | 底部样式类 |

packages/panel/index.js

@@ -1,23 +1,18 @@
 Component({
-  /**
+  externalClasses: [
-   * 组件的属性列表
+    'custom-class',
-   * 用于组件自定义设置
+    'footer-class'
-   */
+  ],
+
+  options: {
+    multipleSlots: true
+  },
+
   properties: {
-    // 标题
+    desc: String,
-    title: {
+    title: String,
-      type: String,
+    status: String,
-      value: ''
+    headerClass: String,
-    },
+    useFooterSlot: Boolean
-    // 内容区顶部是否取消10像素的间距
-    hideTop: {
-      type: Boolean,
-      value: false
-    },
-    // 内容区顶部是否取消边框
-    hideBorder: {
-      type: Boolean,
-      value: false
-    }
   }
 });

packages/panel/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../cell/index"
+  }
 }

packages/panel/index.pcss

@@ -1,30 +1,13 @@
-@import "../common/_mixins";
+@import '../helper/index.pcss';
 
 .van-panel {
-  position: relative;
+  background: $white;
-  overflow: hidden;
-}
 
-.van-panel__title {
+  &__header-value {
-  font-size: 14px;
+    color: $red;
-  line-height: 1;
+  }
-  color: #999;
-  padding: 20px 15px 10px 15px;
-}
 
-.van-panel__content {
+  &__footer {
-  position: relative;
+    padding: 10px 15px;
-  background: #fff;
-  overflow: hidden;
-  &::after {
-    @mixin hairline;
-    border-top-width: 1px;
-    border-bottom-width: 1px;
-  }
-}
-
-.van-panel--without-border {
-  &::after {
-    border: 0 none;
   }
 }

packages/panel/index.wxml

@@ -1,10 +1,19 @@
-<view class="van-panel">
+<view class="van-panel van-hairline--top-bottom custom-class">
-  <view
+  <van-cell 
-    wx:if="{{ title }}"
+    wx:if="{{ title || desc || status }}"
-    class="van-panel__title">{{ title }}</view>
+    title="{{ title }}"
-  <view
+    label="{{ desc }}"
-    class="van-panel__content {{ hideBorder ? 'van-panel--without-border' : '' }}"
+    value="{{ status }}"
-  >
+    custom-class="{{ headerClass }}"
-    <slot></slot>
+    value-class="van-panel__header-value"
+  />
+  <slot wx:else name="header" />
+
+  <view class="van-panel__content">
+    <slot />
+  </view>
+
+  <view wx:if="{{ useFooterSlot }}" class="van-panel__footer van-hairline--top footer-class">
+    <slot name="footer" />
   </view>
 </view>