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 @@ @@ -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; }, }, };