From c445b12507b8a7c6b82cab6ca06fb0e0c3823f4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E6=A7=BF=E8=8A=B1=E5=BC=80?= <15800678225@163.com>
Date: Thu, 4 Jun 2020 16:29:35 +0800
Subject: [PATCH] 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       | 18 ++++++++++++++++++
 src/share-sheet/README.zh-CN.md | 20 +++++++++++++++++++-
 src/share-sheet/demo/index.vue  | 16 +++++++++++++++-
 src/share-sheet/index.js        |  5 +++++
 src/share-sheet/index.less      |  6 ++++++
 src/style/var.less              |  2 ++
 6 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 71809b7ce..4f02df402 100644
--- a/src/share-sheet/README.md
+++ b/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
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index d720aee8d..a6c4ada6d 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/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
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index a90df8b37..1e39317fa 100644
--- a/src/share-sheet/demo/index.vue
+++ b/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: {
diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js
index 70157cec1..83ef08fc5 100644
--- a/src/share-sheet/index.js
+++ b/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>
diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less
index 52aff2484..337a6830b 100644
--- a/src/share-sheet/index.less
+++ b/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%;
diff --git a/src/style/var.less b/src/style/var.less
index f8fb59ff4..559a09297 100644
--- a/src/style/var.less
+++ b/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;