diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 04f12c570..467c533dc 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -14,7 +14,7 @@ Vue.use(ShareSheet);
### Basic Usage
```html
-
+
```
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index abca1649f..c2dec9e41 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -20,7 +20,7 @@ Vue.use(ShareSheet);
分享面板通过`options`属性来定义分享选项,数组的每一项是一个对象,对象格式见文档下方表格。
```html
-
+
```
### 展示多行选项
-当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组代表一行选项
+当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组会作为一行选项展示
```html
@@ -96,6 +96,29 @@ export default {
};
```
+### 自定义图标
+
+除了使用内置的几种图标外,可以直接在`icon`中传入图片 URL 来使用自定义的图标
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ showShare: false,
+ options: [
+ { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png' },
+ { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png' },
+ { name: '名称', icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png' },
+ ],
+ };
+ },
+};
+```
+
## API
### Props
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index 15b92629f..c52a711eb 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -1,13 +1,9 @@
-
+
@@ -17,10 +13,10 @@
+
+
+
+
+
@@ -48,6 +57,7 @@ export default {
i18n: {
'zh-CN': {
qq: 'QQ',
+ name: '名称',
link: '复制链接',
title: '立即分享给好友',
weibo: '微博',
@@ -57,10 +67,12 @@ export default {
multiLine: '展示多行选项',
showSheet: '显示分享面板',
withTitle: '展示面板标题',
+ customIcon: '自定义图标',
description: '描述信息',
},
'en-US': {
qq: 'QQ',
+ name: 'Name',
link: 'Link',
title: 'Share with friends',
weibo: 'Weibo',
@@ -70,47 +82,73 @@ export default {
multiLine: 'Multi Line',
showSheet: 'Show ShareSheet',
withTitle: 'Show Title',
+ customIcon: 'Custom Icon',
description: 'Description',
},
},
data() {
return {
- showBasicSheet: false,
- showTitleSheet: false,
- showMultiRowSheet: false,
+ show: {
+ basic: false,
+ withTitle: false,
+ multiLine: false,
+ customIcon: false,
+ },
};
},
- created() {
- this.options = [
- { name: this.t('wechat'), icon: 'wechat' },
- { name: this.t('weibo'), icon: 'weibo' },
- { name: this.t('link'), icon: 'link' },
- { name: this.t('poster'), icon: 'poster' },
- { name: this.t('qrcode'), icon: 'qrcode' },
- ];
-
- this.multiLineOptions = [
- [
+ computed: {
+ options() {
+ return [
{ name: this.t('wechat'), icon: 'wechat' },
{ name: this.t('weibo'), icon: 'weibo' },
- { name: this.t('qq'), icon: 'qq' },
- ],
- [
{ name: this.t('link'), icon: 'link' },
{ name: this.t('poster'), icon: 'poster' },
{ name: this.t('qrcode'), icon: 'qrcode' },
- ],
- ];
+ ];
+ },
+
+ multiLineOptions() {
+ return [
+ [
+ { name: this.t('wechat'), icon: 'wechat' },
+ { name: this.t('weibo'), icon: 'weibo' },
+ { name: this.t('qq'), icon: 'qq' },
+ ],
+ [
+ { name: this.t('link'), icon: 'link' },
+ { name: this.t('poster'), icon: 'poster' },
+ { name: this.t('qrcode'), icon: 'qrcode' },
+ ],
+ ];
+ },
+
+ customIconOptions() {
+ return [
+ {
+ name: this.t('name'),
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
+ },
+ {
+ name: this.t('name'),
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
+ },
+ {
+ name: this.t('name'),
+ icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
+ },
+ ];
+ },
},
methods: {
onSelect(option) {
this.$toast(option.name);
- this.showBasicSheet = false;
- this.showTitleSheet = false;
- this.showMultiRowSheet = false;
+ this.show.basic = false;
+ this.show.withTitle = false;
+ this.show.multiLine = false;
+ this.show.customIcon = false;
},
},
};