feat(ShareSheet): support title、description prop

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>