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
```
+```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 @@
@@ -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({
>
{option.name && {option.name}}
+ {option.description && (
+
+ {option.description}
+
+ )}
))}
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;