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();