feat(ShareSheet): add options description (#6460)

* feat(share-sheet): share sheet add option

* feat(share-sheet): add options intro

* feat(ShareSheet): add options description

Co-authored-by: zhanglin <zhanglin_0715@youzan.com>

src/share-sheet/README.md

@@ -87,6 +87,23 @@ export default {
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      showShare: false,
+      options: [
+        { name: 'Wechat', icon: 'wechat' },
+        { name: 'Weibo', icon: 'weibo' },
+        { name: 'Link', icon: 'link', description: 'Description' },
+        { name: 'Poster', icon: 'poster' },
+        { name: 'Qrcode', icon: 'qrcode' },
+      ],
+    };
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -111,6 +128,7 @@ export default {
 | Key | Description | Type |
 | --- | --- | --- |
 | name | Option name | _string_ |
+| description | Option description | _string_ |
 | icon | Option icon，can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` or image URL | _string_ |
 
 ### Events

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

@@ -122,7 +122,7 @@ export default {
 
 ### 展示描述信息
 
-通过`description`属性可以设置标题下方的描述文字
+通过`description`属性可以设置标题下方的描述文字, 给`options`属性设置`description`可以添加分享选项描述
 
 ```html
 <van-share-sheet
@@ -133,6 +133,23 @@ export default {
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      showShare: false,
+      options: [
+        { name: '微信', icon: 'wechat' },
+        { name: '微博', icon: 'weibo' },
+        { name: '复制链接', icon: 'link', description: '描述信息' },
+        { name: '分享海报', icon: 'poster' },
+        { name: '二维码', icon: 'qrcode' },
+      ],
+    };
+  },
+};
+```
+
 ## API
 
 ### Props
@@ -159,6 +176,7 @@ export default {
 | 键名 | 说明 | 类型 |
 | --- | --- | --- |
 | name | 分享渠道名称 | _string_ |
+| description | 分享选项描述 | _string_ |
 | icon | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`，支持传入图片 URL | _string_ |
 
 ### Events

src/share-sheet/demo/index.vue

@@ -42,7 +42,7 @@
       <van-share-sheet
         v-model="show.withDesc"
         :title="t('title')"
-        :options="options"
+        :options="optionsWithDesc"
         :description="t('description')"
         @select="onSelect"
       />
@@ -138,6 +138,20 @@ export default {
         },
       ];
     },
+
+    optionsWithDesc() {
+      return [
+        { name: this.t('wechat'), icon: 'wechat' },
+        { name: this.t('weibo'), icon: 'weibo' },
+        {
+          name: this.t('link'),
+          icon: 'link',
+          description: this.t('description'),
+        },
+        { name: this.t('poster'), icon: 'poster' },
+        { name: this.t('qrcode'), icon: 'qrcode' },
+      ];
+    },
   },
 
   methods: {

src/share-sheet/index.js

@@ -92,6 +92,11 @@ export default createComponent({
             >
               <img src={this.getIconURL(option.icon)} class={bem('icon')} />
               {option.name && <span class={bem('name')}>{option.name}</span>}
+              {option.description && (
+                <span class={bem('option-description')}>
+                  {option.description}
+                </span>
+              )}
             </div>
           ))}
         </div>

src/share-sheet/index.less

@@ -65,6 +65,12 @@
     font-size: @share-sheet-option-name-font-size;
   }
 
+  &__option-description {
+    padding: 0 @padding-base;
+    color: @share-sheet-option-description-color;
+    font-size: @share-sheet-option-description-font-size;
+  }
+
   &__cancel {
     display: block;
     width: 100%;

src/style/var.less

@@ -596,6 +596,8 @@
 @share-sheet-icon-size: 48px;
 @share-sheet-option-name-color: @gray-7;
 @share-sheet-option-name-font-size: @font-size-sm;
+@share-sheet-option-description-color: @gray-5;
+@share-sheet-option-description-font-size: @font-size-sm;
 @share-sheet-cancel-button-font-size: @font-size-lg;
 @share-sheet-cancel-button-height: 48px;
 @share-sheet-cancel-button-background: @white;