Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(share-sheet): add new component (#3559)
- Loading branch information
Showing
20 changed files
with
686 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import Page from '../../common/page'; | ||
| import Toast from '../../dist/toast/toast'; | ||
|
|
||
| Page({ | ||
| data: { | ||
| show: { | ||
| basic: false, | ||
| withDesc: false, | ||
| multiLine: false, | ||
| customIcon: false, | ||
| }, | ||
| options: [ | ||
| { name: '微信', icon: 'wechat' }, | ||
| { name: '微博', icon: 'weibo' }, | ||
| { name: '复制链接', icon: 'link' }, | ||
| { name: '分享海报', icon: 'poster' }, | ||
| { name: '二维码', icon: 'qrcode' }, | ||
| ], | ||
|
|
||
| multiLineOptions: [ | ||
| [ | ||
| { name: '微信', icon: 'wechat' }, | ||
| { name: '微博', icon: 'weibo' }, | ||
| { name: 'QQ', icon: 'qq' }, | ||
| ], | ||
| [ | ||
| { name: '复制链接', icon: 'link' }, | ||
| { name: '分享海报', icon: 'poster' }, | ||
| { name: '二维码', icon: 'qrcode' }, | ||
| ], | ||
| ], | ||
|
|
||
| customIconOptions: [ | ||
| { | ||
| 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', | ||
| }, | ||
| ], | ||
|
|
||
| optionsWithDesc: [ | ||
| { name: '微信', icon: 'wechat' }, | ||
| { name: '微博', icon: 'weibo' }, | ||
| { | ||
| name: '复制链接', | ||
| icon: 'link', | ||
| description: '描述信息', | ||
| }, | ||
| { name: '分享海报', icon: 'poster' }, | ||
| { name: '二维码', icon: 'qrcode' }, | ||
| ], | ||
| }, | ||
|
|
||
| onShowShareSheet(event) { | ||
| this.setData({ | ||
| [`show.${event.target.dataset.type}`]: true, | ||
| }); | ||
| }, | ||
|
|
||
| onClose() { | ||
| this.setData({ | ||
| show: { | ||
| basic: false, | ||
| withDesc: false, | ||
| multiLine: false, | ||
| customIcon: false, | ||
| }, | ||
| }); | ||
| }, | ||
|
|
||
| onSelect(event) { | ||
| Toast(event.detail.name); | ||
| this.onClose(); | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "navigationBarTitleText": "Card 商品卡片" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <demo-block card title="基础用法"> | ||
| <van-cell is-link title="显示分享面板" data-type="basic" bind:click="onShowShareSheet" /> | ||
| <van-share-sheet | ||
| show="{{ show.basic }}" | ||
| title="立即分享给好友" | ||
| options="{{ options }}" | ||
| bind:close="onClose" | ||
| bind:select="onSelect" | ||
| /> | ||
| </demo-block> | ||
|
|
||
| <demo-block card title="展示多行选项"> | ||
| <van-cell is-link title="显示分享面板" data-type="multiLine" bind:click="onShowShareSheet" /> | ||
| <van-share-sheet | ||
| show="{{ show.multiLine }}" | ||
| title="立即分享给好友" | ||
| options="{{ multiLineOptions }}" | ||
| bind:close="onClose" | ||
| bind:select="onSelect" | ||
| /> | ||
| </demo-block> | ||
|
|
||
| <demo-block card title="自定义图标"> | ||
| <van-cell is-link title="显示分享面板" data-type="customIcon" bind:click="onShowShareSheet" /> | ||
| <van-share-sheet | ||
| show="{{ show.customIcon }}" | ||
| options="{{ customIconOptions }}" | ||
| bind:close="onClose" | ||
| bind:select="onSelect" | ||
| /> | ||
| </demo-block> | ||
|
|
||
| <demo-block card title="展示描述信息"> | ||
| <van-cell is-link title="显示分享面板" data-type="withDesc" bind:click="onShowShareSheet" /> | ||
| <van-share-sheet | ||
| show="{{ show.withDesc }}" | ||
| title="立即分享给好友" | ||
| options="{{ optionsWithDesc }}" | ||
| description="描述信息" | ||
| bind:close="onClose" | ||
| bind:select="onSelect" | ||
| /> | ||
| </demo-block> | ||
|
|
||
| <van-toast id="van-toast" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .container { | ||
| height: 100vh; | ||
| background-color: #fff; | ||
| } | ||
|
|
||
| .tag, | ||
| .button { | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| .van-card__footer { | ||
| margin-top: 5px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,39 @@ | ||
| @import '../var.less'; | ||
|
|
||
| .hairline-common() { | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| transform-origin: center; /* cover wechat button:after default transforn-origin */ | ||
| content: ' '; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .hairline(@border-color: #eee) { | ||
| .hairline(@color: @border-color) { | ||
| .hairline-common(); | ||
|
|
||
| top: -50%; | ||
| right: -50%; | ||
| bottom: -50%; | ||
| left: -50%; | ||
| border: 0 solid @border-color; | ||
| border: 0 solid @color; | ||
| transform: scale(0.5); | ||
| } | ||
|
|
||
| .hairline-bottom(@border-color: #eee, @left: 0, @right: 0) { | ||
| .hairline-top(@color: @border-color, @left: 0, @right: 0) { | ||
| .hairline-common(); | ||
|
|
||
| top: 0; | ||
| right: @right; | ||
| left: @left; | ||
| border-top: 1px solid @color; | ||
| transform: scaleY(0.5); | ||
| } | ||
|
|
||
| .hairline-bottom(@color: @border-color, @left: 0, @right: 0) { | ||
| .hairline-common(); | ||
|
|
||
| top: auto; | ||
| right: @right; | ||
| bottom: 0; | ||
| left: @left; | ||
| border-bottom: 1px solid @border-color; | ||
| border-bottom: 1px solid @color; | ||
| transform: scaleY(0.5); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.