From 1e2325c00696d336b2273f3d3b543f5e45a08220 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 8 Apr 2020 21:32:41 +0800 Subject: [PATCH] feat(ShareSheet): support multil line --- src/share-sheet/README.md | 75 ++++++++++++++++++++++++++++++++- src/share-sheet/README.zh-CN.md | 46 +++++++++++++++++++- src/share-sheet/demo/index.vue | 17 ++++++-- src/share-sheet/index.js | 21 ++++++--- src/share-sheet/index.less | 6 +++ src/style/mixins/hairline.less | 10 +++++ 6 files changed, 163 insertions(+), 12 deletions(-) diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index 53c27e9b3..04f12c570 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -13,6 +13,79 @@ Vue.use(ShareSheet); ### Basic Usage +```html + + +``` + +```js +import { Toast } from 'vant'; + +export default { + data() { + return { + showShare: false, + options: [ + { name: 'Wechat', icon: 'wechat' }, + { name: 'Weibo', icon: 'weibo' }, + { name: 'Link', icon: 'link' }, + { name: 'Poster', icon: 'poster' }, + { name: 'Qrcode', icon: 'qrcode' }, + ], + }; + }, + methods: { + onSelect(option) { + Toast(option.name); + this.showShare = false; + }, + } +}; +``` + +### Show Title + +```html + +``` + +### Multi Line + +```html + +``` + +```js +export default { + data() { + return { + showShare: false, + options: [ + [ + { name: 'Wechat', icon: 'wechat' }, + { name: 'Weibo', icon: 'weibo' }, + { name: 'QQ', icon: 'qq' }, + ], + [ + { name: 'Link', icon: 'link' }, + { name: 'Poster', icon: 'poster' }, + { name: 'Qrcode', icon: 'qrcode' }, + ], + ], + }; + }, +}; +``` + ## API ### Props @@ -29,7 +102,7 @@ Vue.use(ShareSheet); | Key | Description | Type | |------|------|------| | name | Option name | *string* | -| icon | Option icon，can be set to `wechat` `link` `qrcode` `poster` or image URL | *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 b9b8798ba..abca1649f 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -37,6 +37,7 @@ export default { showShare: false, options: [ { name: '微信', icon: 'wechat' }, + { name: '微博', icon: 'weibo' }, { name: '复制链接', icon: 'link' }, { name: '分享海报', icon: 'poster' }, { name: '二维码', icon: 'qrcode' }, @@ -52,6 +53,49 @@ export default { }; ``` +### 展示面板标题 + +通过`title`属性可以设置面板标题，通过`description`属性可以设置标题下方的描述文字 + +```html + +``` + +### 展示多行选项 + +当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组代表一行选项 + +```html + +``` + +```js +export default { + data() { + return { + showShare: false, + options: [ + [ + { name: '微信', icon: 'wechat' }, + { name: '微博', icon: 'weibo' }, + { name: 'QQ', icon: 'qq' }, + ], + [ + { name: '复制链接', icon: 'link' }, + { name: '分享海报', icon: 'poster' }, + { name: '二维码', icon: 'qrcode' }, + ], + ], + }; + }, +}; +``` + ## API ### Props @@ -70,7 +114,7 @@ export default { | 键名 | 说明 | 类型 | |------|------|------| | name | 分享渠道名称 | *string* | -| icon | 图标，可选值为 `wechat` `link` `qrcode` `poster`，支持传入图片 URL | *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 9ffeb697f..15b92629f 100644 --- a/src/share-sheet/demo/index.vue +++ b/src/share-sheet/demo/index.vue @@ -47,25 +47,29 @@ export default { i18n: { 'zh-CN': { + qq: 'QQ', link: '复制链接', title: '立即分享给好友', + weibo: '微博', wechat: '微信', poster: '分享海报', qrcode: '二维码', - multiLine: '多行展示', + multiLine: '展示多行选项', showSheet: '显示分享面板', - withTitle: '展示带标题的面板', + withTitle: '展示面板标题', description: '描述信息', }, 'en-US': { + qq: 'QQ', link: 'Link', title: 'Share with friends', + weibo: 'Weibo', wechat: 'Wechat', poster: 'Poster', qrcode: 'Qrcode', multiLine: 'Multi Line', showSheet: 'Show ShareSheet', - withTitle: 'Show ShareSheet with title', + withTitle: 'Show Title', description: 'Description', }, }, @@ -81,13 +85,18 @@ export default { 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 = [ - [{ name: this.t('wechat'), icon: 'wechat' }], + [ + { 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' }, diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js index b1bb9d9cd..874ab3b29 100644 --- a/src/share-sheet/index.js +++ b/src/share-sheet/index.js @@ -7,7 +7,7 @@ import { popupMixinProps } from '../mixins/popup'; // Components import Popup from '../popup'; -const PRESET_ICONS = ['wechat', 'link', 'qrcode', 'poster']; +const PRESET_ICONS = ['qq', 'weibo', 'wechat', 'link', 'qrcode', 'poster']; const [createComponent, bem, t] = createNamespace('share-sheet'); @@ -30,6 +30,7 @@ export default createComponent({ methods: { onCancel() { this.toggle(false); + this.$emit('cancel'); }, onSelect(option, index) { @@ -42,7 +43,7 @@ export default createComponent({ getIconURL(icon) { if (PRESET_ICONS.indexOf(icon) !== -1) { - return `https://img.yzcdn.cn/vant/share-icon-${icon}.svg`; + return `https://img.yzcdn.cn/vant/share-icon-${icon}.png`; } return icon; @@ -64,10 +65,10 @@ export default createComponent({ ); }, - genOptions() { + genOptions(options, showBorder) { return ( -
- {this.options.map((option, index) => ( +
+ {options.map((option, index) => (
{ @@ -82,6 +83,14 @@ export default createComponent({ ); }, + genRows() { + const { options } = this; + if (Array.isArray(options[0])) { + return options.map((item, index) => this.genOptions(item, index !== 0)); + } + return this.genOptions(options); + }, + genCancelText() { const cancelText = isDef(this.cancelText) ? this.cancelText : t('cancel'); @@ -106,7 +115,7 @@ export default createComponent({ onInput={this.toggle} > {this.genHeader()} - {this.genOptions()} + {this.genRows()} {this.genCancelText()} ); diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less index ae5b2c55b..398de3369 100644 --- a/src/share-sheet/index.less +++ b/src/share-sheet/index.less @@ -1,4 +1,5 @@ @import '../style/var'; +@import '../style/mixins/hairline'; .van-share-sheet { &__header { @@ -23,11 +24,16 @@ } &__options { + position: relative; display: flex; padding: @padding-md 0 @padding-md @padding-lg; overflow-x: auto; -webkit-overflow-scrolling: touch; + &--border::before { + .hairline-top(@cell-border-color, @padding-md); + } + // fix right-padding issue for overflow-x element // see: https://stackoverflow.com/questions/10054870 &::after { diff --git a/src/style/mixins/hairline.less b/src/style/mixins/hairline.less index d1fed52f2..0cd6294f9 100644 --- a/src/style/mixins/hairline.less +++ b/src/style/mixins/hairline.less @@ -18,6 +18,16 @@ transform: scale(0.5); } +.hairline-top(@color: @border-color, @left: 0) { + .hairline-common(); + + top: 0; + right: 0; + left: @left; + border-top: 1px solid @color; + transform: scaleY(0.5); +} + .hairline-bottom(@color: @border-color, @left: 0) { .hairline-common();