diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 467c533dc..c74248b09 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -17,6 +17,7 @@ Vue.use(ShareSheet);
@@ -47,23 +48,16 @@ export default {
};
```
-### Show Title
+### Multi Line
```html
```
-### Multi Line
-
-```html
-
-```
-
```js
export default {
data() {
@@ -86,6 +80,17 @@ export default {
};
```
+### Show Description
+
+```html
+
+```
+
## API
### Props
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index c2dec9e41..fb74f140e 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -23,6 +23,7 @@ Vue.use(ShareSheet);
@@ -53,25 +54,16 @@ export default {
};
```
-### 展示面板标题
-
-通过`title`属性可以设置面板标题,通过`description`属性可以设置标题下方的描述文字
-
-```html
-
-```
-
### 展示多行选项
当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组会作为一行选项展示
```html
-
+
```
```js
@@ -119,6 +111,19 @@ export default {
};
```
+### 展示描述信息
+
+通过`description`属性可以设置标题下方的描述文字
+
+```html
+
+```
+
## API
### Props
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index c52a711eb..a90df8b37 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -4,22 +4,8 @@
-
-
-
-
-
@@ -32,6 +18,7 @@
/>
@@ -49,6 +36,17 @@
@select="onSelect"
/>
+
+
+
+
+
@@ -66,7 +64,7 @@ export default {
qrcode: '二维码',
multiLine: '展示多行选项',
showSheet: '显示分享面板',
- withTitle: '展示面板标题',
+ withDesc: '展示描述信息',
customIcon: '自定义图标',
description: '描述信息',
},
@@ -74,14 +72,14 @@ export default {
qq: 'QQ',
name: 'Name',
link: 'Link',
- title: 'Share with friends',
+ title: 'Share',
weibo: 'Weibo',
wechat: 'Wechat',
poster: 'Poster',
qrcode: 'Qrcode',
multiLine: 'Multi Line',
showSheet: 'Show ShareSheet',
- withTitle: 'Show Title',
+ withDesc: 'Show Description',
customIcon: 'Custom Icon',
description: 'Description',
},
@@ -91,7 +89,7 @@ export default {
return {
show: {
basic: false,
- withTitle: false,
+ withDesc: false,
multiLine: false,
customIcon: false,
},
@@ -146,7 +144,7 @@ export default {
onSelect(option) {
this.$toast(option.name);
this.show.basic = false;
- this.show.withTitle = false;
+ this.show.withDesc = false;
this.show.multiLine = false;
this.show.customIcon = false;
},
diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js
index 874ab3b29..2912b3eb2 100644
--- a/src/share-sheet/index.js
+++ b/src/share-sheet/index.js
@@ -50,13 +50,13 @@ export default createComponent({
},
genHeader() {
- if (!this.title && !this.description) {
- return;
- }
-
const title = this.slots('title') || this.title;
const description = this.slots('description') || this.description;
+ if (!title && !description) {
+ return;
+ }
+
return (
))}
diff --git a/src/share-sheet/test/__snapshots__/demo.spec.js.snap b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
index aed70df9a..0e8949134 100644
--- a/src/share-sheet/test/__snapshots__/demo.spec.js.snap
+++ b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
@@ -23,5 +23,12 @@ exports[`renders demo correctly 1`] = `
+
`;
diff --git a/src/share-sheet/test/__snapshots__/index.spec.js.snap b/src/share-sheet/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..e5d794098
--- /dev/null
+++ b/src/share-sheet/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cancel-text prop 1`] = ``;
+
+exports[`description prop 1`] = `foo`;
+
+exports[`title & description slot 1`] = `
+
+`;
diff --git a/src/share-sheet/test/index.spec.js b/src/share-sheet/test/index.spec.js
new file mode 100644
index 000000000..20b061dd3
--- /dev/null
+++ b/src/share-sheet/test/index.spec.js
@@ -0,0 +1,72 @@
+import ShareSheet from '..';
+import { mount } from '../../../test';
+
+test('cancel-text prop', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ cancelText: 'foo',
+ },
+ });
+
+ expect(wrapper.find('.van-share-sheet__cancel')).toMatchSnapshot();
+
+ wrapper.setProps({ cancelText: '' });
+ expect(wrapper.contains('.van-share-sheet__cancel')).toBeFalsy();
+});
+
+test('description prop', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ description: 'foo',
+ },
+ });
+
+ expect(wrapper.find('.van-share-sheet__description')).toMatchSnapshot();
+
+ wrapper.setProps({ description: '' });
+ expect(wrapper.contains('.van-share-sheet__description')).toBeFalsy();
+});
+
+test('select event', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ options: [{ icon: 'wechat', name: 'wechat' }],
+ },
+ });
+
+ wrapper.find('.van-share-sheet__option').trigger('click');
+ expect(wrapper.emitted('select')[0]).toEqual([
+ { icon: 'wechat', name: 'wechat' },
+ 0,
+ ]);
+});
+
+test('cancel event', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ },
+ });
+
+ wrapper.find('.van-share-sheet__cancel').trigger('click');
+
+ expect(wrapper.emitted('input')[0][0]).toEqual(false);
+ expect(wrapper.emitted('cancel')[0]).toBeTruthy();
+});
+
+test('title & description slot', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ },
+ scopedSlots: {
+ title: () => 'Custom Title',
+ description: () => 'Custom Description',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});