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;