feat(ShareSheet): support title、description prop

src/action-sheet/README.zh-CN.md

@@ -17,7 +17,7 @@ Vue.use(ActionSheet);
 
 ### 基础用法
 
-`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
+动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
 
 ```html
 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

src/share-sheet/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-底部弹起的模态面板，用于展示各分享渠道对应的操作按钮，不包含具体的分享逻辑。2.6 版本开始支持此组件。
+底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。2.6 版本开始支持此组件。
 
 ### 引入
 
@@ -17,17 +17,38 @@ Vue.use(ShareSheet);
 
 ### 基础用法
 
+分享面板通过`options`属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
+
 ```html
-<van-share-sheet :options="options" />
+<van-cell @click="showShare = true" />
+<van-share-sheet
+  v-model="showShare"
+  :options="options"
+  @select="onSelect"
+/>
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
-      options: [],
+      showShare: false,
+      options: [
+        { name: '微信', icon: 'wechat' },
+        { name: '复制链接', icon: 'link' },
+        { name: '分享海报', icon: 'poster' },
+        { name: '二维码', icon: 'qrcode' },
+      ],
     };
   },
+  methods: {
+    onSelect(option) {
+      Toast(option.name);
+      this.showShare = false;
+    },
+  }
 };
 ```
 

src/share-sheet/demo/index.vue

@@ -6,7 +6,39 @@
         :title="t('showSheet')"
         @click="showBasicSheet = true"
       />
-      <van-share-sheet v-model="showBasicSheet" :options="options" />
+      <van-share-sheet
+        v-model="showBasicSheet"
+        :options="options"
+        @select="onSelect"
+      />
+    </demo-block>
+
+    <demo-block :title="t('withTitle')">
+      <van-cell
+        is-link
+        :title="t('showSheet')"
+        @click="showTitleSheet = true"
+      />
+      <van-share-sheet
+        v-model="showTitleSheet"
+        :title="t('title')"
+        :options="options"
+        :description="t('description')"
+        @select="onSelect"
+      />
+    </demo-block>
+
+    <demo-block :title="t('multiLine')">
+      <van-cell
+        is-link
+        :title="t('showSheet')"
+        @click="showMultiRowSheet = true"
+      />
+      <van-share-sheet
+        v-model="showMultiRowSheet"
+        :options="multiLineOptions"
+        @select="onSelect"
+      />
     </demo-block>
   </demo-section>
 </template>
@@ -16,23 +48,33 @@ export default {
   i18n: {
     'zh-CN': {
       link: '复制链接',
+      title: '立即分享给好友',
       wechat: '微信',
       poster: '分享海报',
       qrcode: '二维码',
+      multiLine: '多行展示',
       showSheet: '显示分享面板',
+      withTitle: '展示带标题的面板',
+      description: '描述信息',
     },
     'en-US': {
       link: 'Link',
+      title: 'Share with friends',
       wechat: 'Wechat',
       poster: 'Poster',
       qrcode: 'Qrcode',
+      multiLine: 'Multi Line',
       showSheet: 'Show ShareSheet',
+      withTitle: 'Show ShareSheet with title',
+      description: 'Description',
     },
   },
 
   data() {
     return {
       showBasicSheet: false,
+      showTitleSheet: false,
+      showMultiRowSheet: false,
     };
   },
 
@@ -43,6 +85,24 @@ export default {
       { name: this.t('poster'), icon: 'poster' },
       { name: this.t('qrcode'), icon: 'qrcode' },
     ];
+
+    this.multiLineOptions = [
+      [{ name: this.t('wechat'), icon: 'wechat' }],
+      [
+        { name: this.t('link'), icon: 'link' },
+        { name: this.t('poster'), icon: 'poster' },
+        { name: this.t('qrcode'), icon: 'qrcode' },
+      ],
+    ];
+  },
+
+  methods: {
+    onSelect(option) {
+      this.$toast(option.name);
+      this.showBasicSheet = false;
+      this.showTitleSheet = false;
+      this.showMultiRowSheet = false;
+    },
   },
 };
 </script>

src/share-sheet/index.js

@@ -48,6 +48,22 @@ export default createComponent({
       return icon;
     },
 
+    genHeader() {
+      if (!this.title && !this.description) {
+        return;
+      }
+
+      const title = this.slots('title') || this.title;
+      const description = this.slots('description') || this.description;
+
+      return (
+        <div class={bem('header')}>
+          {title && <h2 class={bem('title')}>{title}</h2>}
+          {description && <span class={bem('description')}>{description}</span>}
+        </div>
+      );
+    },
+
     genOptions() {
       return (
         <div class={bem('options')}>
@@ -89,6 +105,7 @@ export default createComponent({
         safeAreaInsetBottom={this.safeAreaInsetBottom}
         onInput={this.toggle}
       >
+        {this.genHeader()}
         {this.genOptions()}
         {this.genCancelText()}
       </Popup>

src/share-sheet/index.less

@@ -1,9 +1,30 @@
 @import '../style/var';
 
 .van-share-sheet {
+  &__header {
+    padding: 12px @padding-md @padding-base;
+    text-align: center;
+  }
+
+  &__title {
+    margin-top: @padding-xs;
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-md;
+    line-height: 20px;
+  }
+
+  &__description {
+    display: block;
+    margin-top: @padding-xs;
+    color: @gray-6;
+    font-size: @font-size-sm;
+    line-height: 16px;
+  }
+
   &__options {
     display: flex;
-    padding: 16px 0 16px 24px;
+    padding: @padding-md 0 @padding-md @padding-lg;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -11,7 +32,8 @@
     // see: https://stackoverflow.com/questions/10054870
     &::after {
       display: block;
-      width: 24px;
+      flex-shrink: 0;
+      width: @padding-lg;
       content: '';
     }
   }
@@ -20,12 +42,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 32px;
+    margin-right: @padding-xl;
     cursor: pointer;
     user-select: none;
 
     &:last-child {
-      padding-right: 16px;
+      margin-right: 0;
     }
 
     &:active {
@@ -39,16 +61,16 @@
   }
 
   &__name {
-    margin-top: 8px;
-    color: #646566;
-    font-size: 12px;
+    margin-top: @padding-xs;
+    color: @gray-7;
+    font-size: @font-size-sm;
   }
 
   &__cancel {
     display: block;
     width: 100%;
     padding: 0;
-    font-size: 16px;
+    font-size: @font-size-lg;
     line-height: 48px;
     text-align: center;
     background-color: @white;
@@ -57,7 +79,7 @@
 
     &::before {
       display: block;
-      height: 8px;
+      height: @padding-xs;
       background-color: @background-color;
       content: ' ';
     }

src/share-sheet/test/__snapshots__/demo.spec.js.snap

@@ -9,5 +9,19 @@ exports[`renders demo correctly 1`] = `
     </div>
     <!---->
   </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <!---->
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <!---->
+  </div>
 </div>
 `;

src/style/var.less

@@ -584,6 +584,8 @@
 @rate-icon-full-color: #ffd21e;
 @rate-icon-disabled-color: #bdbdbd;
 
+// ShareSheet
+
 // Search
 @search-padding: 10px @padding-sm;
 @search-background-color: @white;