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 (
{title &&

{title}

} @@ -76,7 +76,7 @@ export default createComponent({ }} > - {option.name || ''} + {option.name && {option.name}}
))} 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`] = ` +
+
+

Custom Title

Custom Description +
+
+
+`; 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(); +});