feat(ActionSheet): add description prop (#2138)

example/pages/action-sheet/index.js

@@ -6,10 +6,11 @@ Page({
     show2: false,
     show3: false,
     show4: false,
+    show5: false,
     action1: [
       { name: '选项' },
       { name: '选项' },
-      { name: '选项', subname: '描述信息' }
+      { name: '选项', subname: '副文本' }
     ],
     action2: [
       { name: '选项', color: '#07c160' },
@@ -38,5 +39,9 @@ Page({
 
   toggleActionSheet4() {
     this.toggle('show4');
+  },
+
+  toggleActionSheet5() {
+    this.toggle('show5');
   }
 });

example/pages/action-sheet/index.wxml

@@ -30,10 +30,21 @@
   </van-action-sheet>
 </demo-block>
 
-<demo-block title="展示标题栏" padding>
+<demo-block title="展示描述信息" padding>
   <van-button type="primary" bind:click="toggleActionSheet4">弹出菜单</van-button>
   <van-action-sheet
     show="{{ show4 }}"
+    actions="{{ action1 }}"
+    description="这是一段描述信息"
+    bind:close="toggleActionSheet4"
+  >
+  </van-action-sheet>
+</demo-block>
+
+<demo-block title="展示标题栏" padding>
+  <van-button type="primary" bind:click="toggleActionSheet5">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show5 }}"
     title="标题"
     bind:close="toggleActionSheet4"
   >

packages/action-sheet/README.md

@@ -39,7 +39,7 @@ Page({
       },
       {
         name: '选项',
-        subname: '描述信息',
+        subname: '副文本',
         openType: 'share'
       }
     ]
@@ -92,6 +92,18 @@ Page({
 />
 ```
 
+### 展示描述信息
+
+设置`description`属性后，会在选项上方显示描述信息
+
+```html
+<van-action-sheet
+  show="{{ show }}" 
+  :actions="actions"
+  description="这是一段描述信息"
+/>
+```
+
 ### 展示标题栏
 
 通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
@@ -110,12 +122,13 @@ Page({
 |-----------|-----------|-----------|-------------|-------------|
 | actions | 菜单选项 | *Array* | `[]` | - |
 | title | 标题 | *string* | - | - |
+| description | 选项上方的描述信息 | *string* | - | 1.0.0 |
 | z-index | z-index 层级 | *number* | `100` | - |
 | cancel-text | 取消按钮文字 | *string* | - | - |
-| round | 是否显示圆角 | *boolean* | `true` | 1.0.0 |
 | overlay | 是否显示遮罩层 | *boolean* | - | - |
-| close-on-click-overlay | 点击遮罩是否关闭菜单 | *boolean* | - | - |
+| round | 是否显示圆角 | *boolean* | `true` | 1.0.0 |
 | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `true` | - |
+| close-on-click-overlay | 点击遮罩是否关闭菜单 | *boolean* | - | - |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` | - |
 
 ### Events

packages/action-sheet/index.less

@@ -50,6 +50,14 @@
     text-align: center;
   }
 
+  &__description {
+    padding: @padding-md;
+    color: @action-sheet-description-color;
+    font-size: @action-sheet-description-font-size;
+    line-height: @action-sheet-description-line-height;
+    text-align: center;
+  }
+
   &__close {
     position: absolute !important;
     top: 0;

packages/action-sheet/index.ts

@@ -6,6 +6,7 @@ VantComponent({
     show: Boolean,
     title: String,
     cancelText: String,
+    description: String,
     round: {
       type: Boolean,
       value: true

packages/action-sheet/index.wxml

@@ -19,6 +19,9 @@
       bind:click="onClose"
     />
   </view>
+  <view wx:if="{{ description }}" class="van-action-sheet__description">
+    {{ description }}
+  </view>
   <view wx:if="{{ actions && actions.length }}">
     <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
     <button

packages/common/style/var.less

@@ -37,6 +37,11 @@
 @animation-duration-base: .3s;
 @animation-duration-fast: .2s;
 
+// ActionSheet
+@action-sheet-description-color: @gray-darker;
+@action-sheet-description-font-size: @font-size-md;
+@action-sheet-description-line-height: 20px;
+
 // Button
 @button-default-color: @text-color;
 @button-default-background-color: @white;