[new feature] ActionSheet: support use both title and actions

docs/markdown/v2-progress-tracking.md

@@ -53,6 +53,10 @@
 
 - 新增`Skeleton`骨架屏组件
 
+### ActionSheet
+
+- 支持同时使用`title`和`actions`属性
+
 ### Button
 
 - 新增`loading-type`属性

packages/action-sheet/demo/index.vue

@@ -1,19 +1,28 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
+      <van-button @click="show1 = true">{{ $t('buttonText') }}</van-button>
       <van-action-sheet
         v-model="show1"
-        :actions="actions"
+        :actions="simpleActions"
+        @select="onSelect"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('status')">
+      <van-button @click="show2 = true">{{ $t('buttonText') }}</van-button>
+      <van-action-sheet
+        v-model="show2"
+        :actions="statusActions"
         @select="onSelect"
       />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
+      <van-button @click="show3 = true">{{ $t('buttonText') }}</van-button>
       <van-action-sheet
-        v-model="show2"
+        v-model="show3"
-        :actions="actions"
+        :actions="simpleActions"
         :cancel-text="$t('cancel')"
         @cancel="onCancel"
         @select="onSelect"
@@ -21,9 +30,9 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
+      <van-button @click="show4 = true">{{ $t('buttonText') }}</van-button>
       <van-action-sheet
-        v-model="show3"
+        v-model="show4"
         :title="$t('title')"
       >
         <p>{{ $t('content') }}</p>
@@ -36,20 +45,18 @@
 export default {
   i18n: {
     'zh-CN': {
-      button1: '弹出 ActionSheet',
+      buttonText: '弹出菜单',
-      button2: '弹出带取消按钮的 ActionSheet',
+      title2: '展示取消按钮',
-      button3: '弹出带标题的 ActionSheet',
+      title3: '展示标题栏',
-      title2: '带取消按钮的 ActionSheet',
+      status: '选项状态',
-      title3: '带标题的 ActionSheet',
       description: '描述信息',
       disabledOption: '禁用选项'
     },
     'en-US': {
-      button1: 'Show ActionSheet',
+      buttonText: 'Show ActionSheet',
-      button2: 'Show ActionSheet with cancel button',
-      button3: 'Show ActionSheet with title',
       title2: 'ActionSheet with cancel button',
       title3: 'ActionSheet with title',
+      status: 'Status',
       description: 'Description',
       disabledOption: 'Disabled Option'
     }
@@ -59,15 +66,23 @@ export default {
     return {
       show1: false,
       show2: false,
-      show3: false
+      show3: false,
+      show4: false
     };
   },
 
   computed: {
-    actions() {
+    simpleActions() {
+      return [
+        { name: this.$t('option') },
+        { name: this.$t('option') },
+        { name: this.$t('option'), subname: this.$t('description') }
+      ];
+    },
+
+    statusActions() {
       return [
         { name: this.$t('option') },
-        { name: this.$t('option'), subname: this.$t('description') },
         { loading: true },
         { name: this.$t('disabledOption'), disabled: true }
       ];

packages/action-sheet/en-US.md

@@ -10,6 +10,7 @@ Vue.use(ActionSheet);
 ### Usage
 
 #### Basic Usage
+
 Use `actions` prop to set options of action-sheet. 
 
 ```html
@@ -26,20 +27,9 @@ export default {
     return {
       show: false,
       actions: [
-        {
+        { name: 'Option' },
-          name: 'Option'
+        { name: 'Option' },
-        },
+        { name: 'Option', subname: 'Description' }
-        {
-          name: 'Option',
-          description: 'Description'
-        },
-        {
-          loading: true
-        },
-        {
-          name: 'Disabled Option',
-          disabled: true
-        }
       ]
     };
   },
@@ -53,6 +43,30 @@ export default {
 }
 ```
 
+#### Status
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Option' },
+        { loading: true },
+        { name: 'Disabled Option', disabled: true }
+      ]
+    };
+  }
+}
+```
+
 #### ActionSheet with cancel button
 
 ```html
@@ -66,7 +80,6 @@ export default {
 ```
 
 #### ActionSheet with title
-ActionSheet will get another style if there is a `title` prop.
 
 ```html
 <van-action-sheet v-model="show" title="Title">

packages/action-sheet/index.tsx

@@ -36,17 +36,21 @@ function ActionSheet(
 ) {
   const { title, cancelText } = props;
 
-  const onCancel = () => {
+  function onCancel() {
     emit(ctx, 'input', false);
     emit(ctx, 'cancel');
-  };
+  }
 
-  const Header = () => (
+  function Header() {
-    <div class={[bem('header'), 'van-hairline--top-bottom']}>
+    if (title) {
-      {title}
+      return (
-      <Icon name="close" class={bem('close')} onClick={onCancel} />
+        <div class={[bem('header'), 'van-hairline--top-bottom']}>
-    </div>
+          {title}
-  );
+          <Icon name="close" class={bem('close')} onClick={onCancel} />
+        </div>
+      );
+    }
+  }
 
   const Option = (item: ActionSheetItem, index: number) => (
     <div
@@ -92,7 +96,8 @@ function ActionSheet(
       }}
       {...inherit(ctx)}
     >
-      {title ? Header() : props.actions.map(Option)}
+      {Header()}
+      {props.actions.map(Option)}
       {slots.default && <div class={bem('content')}>{slots.default()}</div>}
       {cancelText && (
         <div class={bem('cancel')} onClick={onCancel}>

packages/action-sheet/zh-CN.md

@@ -11,7 +11,7 @@ Vue.use(ActionSheet);
 
 #### 基础用法
 
-需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
+`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
 
 ```html
 <van-action-sheet
@@ -27,20 +27,9 @@ export default {
     return {
       show: false,
       actions: [
-        {
+        { name: '选项' },
-          name: '选项'
+        { name: '选项' },
-        },
+        { name: '选项', subname: '描述信息' }
-        {
-          name: '选项',
-          subname: '描述信息'
-        },
-        {
-          loading: true
-        },
-        {
-          name: '禁用选项',
-          disabled: true
-        }
       ]
     };
   },
@@ -55,9 +44,35 @@ export default {
 }
 ```
 
-#### 带取消按钮的 ActionSheet
+#### 选项状态
 
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
+选项可以设置为加载状态或禁用状态
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: '选项' },
+        { name: '选项', loading: true },
+        { name: '禁用选项', disabled: true }
+      ]
+    };
+  }
+}
+```
+
+#### 展示取消按钮
+
+设置`cancelText`属性后，会在底部展示取消按钮，点击后关闭当前菜单
 
 ```html
 <van-action-sheet
@@ -69,13 +84,13 @@ export default {
 />
 ```
 
-#### 带标题的 ActionSheet
+#### 展示标题栏
 
-如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
+通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
 
 ```html
-<van-action-sheet v-model="show" title="支持以下配送方式">
+<van-action-sheet v-model="show" title="标题">
-  <p>一些内容</p>
+  <p>内容</p>
 </van-action-sheet>
 ```
 
@@ -85,7 +100,7 @@ export default {
 |------|------|------|------|------|
 | actions | 菜单选项 | `Array` | `[]` | - |
 | title | 标题 | `String` | - | - |
-| cancel-text | 取消按钮文字，为空时不展示取消按钮 | `String` | - | - |
+| cancel-text | 取消按钮文字 | `String` | - | - |
 | overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |

packages/address-edit/en-US.md

@@ -1,6 +1,7 @@
 ## AddressEdit
 
 ### Install
+
 ``` javascript
 import { AddressEdit } from 'vant';
 
@@ -11,7 +12,6 @@ Vue.use(AddressEdit);
 
 #### Basic Usage
 
-
 ```html
 <van-address-edit
   :area-list="areaList"