mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(share-sheet): add new component (#3559)
This commit is contained in:
rex
GitHub
parent
4a479f6234
commit
13e82ea0db
@ -50,7 +50,8 @@
|
||||
"pages/skeleton/index",
|
||||
"pages/divider/index",
|
||||
"pages/empty/index",
|
||||
"pages/calendar/index"
|
||||
"pages/calendar/index",
|
||||
"pages/share-sheet/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#f8f8f8",
|
||||
@ -123,7 +124,8 @@
|
||||
"van-dropdown-menu": "./dist/dropdown-menu/index",
|
||||
"van-dropdown-item": "./dist/dropdown-item/index",
|
||||
"van-skeleton": "./dist/skeleton/index",
|
||||
"van-calendar": "./dist/calendar/index"
|
||||
"van-calendar": "./dist/calendar/index",
|
||||
"van-share-sheet": "./dist/share-sheet/index"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
|
||||
@ -115,6 +115,10 @@ export default [
|
||||
path: '/overlay',
|
||||
title: 'Overlay 遮罩层',
|
||||
},
|
||||
{
|
||||
path: '/share-sheet',
|
||||
title: 'ShareSheet 分享面板',
|
||||
},
|
||||
{
|
||||
path: '/swipe-cell',
|
||||
title: 'SwipeCell 滑动单元格',
|
||||
|
||||
82
example/pages/share-sheet/index.js
Normal file
82
example/pages/share-sheet/index.js
Normal file
@ -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();
|
||||
},
|
||||
});
|
||||
3
example/pages/share-sheet/index.json
Normal file
3
example/pages/share-sheet/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Card 商品卡片"
|
||||
}
|
||||
45
example/pages/share-sheet/index.wxml
Normal file
45
example/pages/share-sheet/index.wxml
Normal file
@ -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" />
|
||||
13
example/pages/share-sheet/index.wxss
Normal file
13
example/pages/share-sheet/index.wxss
Normal file
@ -0,0 +1,13 @@
|
||||
.container {
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-card__footer {
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -374,12 +374,21 @@
|
||||
"id": -1,
|
||||
"name": "index-bar",
|
||||
"pathName": "pages/index-bar/index",
|
||||
"query": "",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"id": -1,
|
||||
"name": "empty",
|
||||
"pathName": "pages/empty/index",
|
||||
"query": "",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"id": -1,
|
||||
"name": "pages/share-sheet/index",
|
||||
"pathName": "pages/share-sheet/index",
|
||||
"query": "",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@ -387,6 +391,23 @@
|
||||
@switch-disabled-opacity: 0.4;
|
||||
@switch-border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
// ShareSheet
|
||||
@share-sheet-header-padding: @padding-sm @padding-md @padding-base;
|
||||
@share-sheet-title-color: @text-color;
|
||||
@share-sheet-title-font-size: @font-size-md;
|
||||
@share-sheet-title-line-height: @line-height-md;
|
||||
@share-sheet-description-color: @gray-6;
|
||||
@share-sheet-description-font-size: @font-size-sm;
|
||||
@share-sheet-description-line-height: 16px;
|
||||
@share-sheet-icon-size: 48px;
|
||||
@share-sheet-option-name-color: @gray-7;
|
||||
@share-sheet-option-name-font-size: @font-size-sm;
|
||||
@share-sheet-option-description-color: @gray-5;
|
||||
@share-sheet-option-description-font-size: @font-size-sm;
|
||||
@share-sheet-cancel-button-font-size: @font-size-lg;
|
||||
@share-sheet-cancel-button-height: 48px;
|
||||
@share-sheet-cancel-button-background: @white;
|
||||
|
||||
// Search
|
||||
@search-background-color: @gray-1;
|
||||
@search-padding: 10px @padding-sm;
|
||||
|
||||
195
packages/share-sheet/README.md
Normal file
195
packages/share-sheet/README.md
Normal file
@ -0,0 +1,195 @@
|
||||
# ShareSheet 分享面板
|
||||
|
||||
### 介绍
|
||||
|
||||
底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-share-sheet": "@vant/weapp/share-sheet/index"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
分享面板通过 `options` 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell title="显示分享面板" bind:click="onClick" />
|
||||
<van-share-sheet
|
||||
show="{{ showShare }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ options }}"
|
||||
bind:select="onSelect"
|
||||
bind:close="onClose"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.setData({ showShare: true });
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ showShare: false });
|
||||
},
|
||||
|
||||
onSelect(event) {
|
||||
Toast(event.detail.name);
|
||||
this.onClose();
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 展示多行选项
|
||||
|
||||
当分享选项的数量较多时，可以将 `options` 定义为数组嵌套的格式，每个子数组会作为一行选项展示。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
show="{{ showShare }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ options }}"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
showShare: false,
|
||||
options: [
|
||||
[
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
除了使用内置的几种图标外，可以直接在 `icon` 中传入图片 URL 来使用自定义的图标。
|
||||
|
||||
```html
|
||||
<van-share-sheet show="{{ showShare }}" options="{{ options }}" />
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
showShare: false,
|
||||
options: [
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
通过 `description` 属性可以设置标题下方的描述文字, 在 `options` 内设置 `description` 属性可以添加分享选项描述。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
show="{{ showShare }}"
|
||||
options="{{ options }}"
|
||||
title="立即分享给好友"
|
||||
description="描述信息"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{
|
||||
name: '复制链接',
|
||||
icon: 'link',
|
||||
description: '描述信息',
|
||||
},
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| options | 分享选项 | _Option[]_ | `[]` |
|
||||
| title | 顶部标题 | _string_ | - |
|
||||
| cancel-text | 取消按钮文字 | _string_ | `'取消'` |
|
||||
| description | 标题下方的辅助描述文字 | _string_ | - |
|
||||
| duration | 动画时长，单位毫秒 | _number \| string_ | `300` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` |
|
||||
|
||||
### Option 数据结构
|
||||
|
||||
`options`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| name | 分享渠道名称 | _string_ |
|
||||
| description | 分享选项描述 | _string_ |
|
||||
| icon | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`，支持传入图片 URL | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------------- | ------------------ | ------------------------------- |
|
||||
| select | 点击分享选项时触发 | _option: Option, index: number_ |
|
||||
| close | 关闭时触发 | - |
|
||||
| cancel | 点击取消按钮时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ----------- | -------------- |
|
||||
| title | 自定义顶部标题 |
|
||||
| description | 自定义描述文字 |
|
||||
7
packages/share-sheet/index.json
Normal file
7
packages/share-sheet/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-popup": "../popup/index",
|
||||
"options": "./options"
|
||||
}
|
||||
}
|
||||
69
packages/share-sheet/index.less
Normal file
69
packages/share-sheet/index.less
Normal file
@ -0,0 +1,69 @@
|
||||
@import '../common/style/var';
|
||||
@import '../common/style/mixins/hairline.less';
|
||||
|
||||
.van-share-sheet {
|
||||
&__header {
|
||||
padding: @share-sheet-header-padding;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-top: @padding-xs;
|
||||
color: @share-sheet-title-color;
|
||||
font-weight: normal;
|
||||
font-size: @share-sheet-title-font-size;
|
||||
line-height: @share-sheet-title-line-height;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__title:not(:empty) + &__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: block;
|
||||
margin-top: @padding-xs;
|
||||
color: @share-sheet-description-color;
|
||||
font-size: @share-sheet-description-font-size;
|
||||
line-height: @share-sheet-description-line-height;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__description:not(:empty) + &__description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
font-size: @share-sheet-cancel-button-font-size;
|
||||
line-height: @share-sheet-cancel-button-height;
|
||||
text-align: center;
|
||||
background: @share-sheet-cancel-button-background;
|
||||
border: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
height: @padding-xs;
|
||||
background-color: @background-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
58
packages/share-sheet/index.ts
Normal file
58
packages/share-sheet/index.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { Weapp } from 'definitions/weapp';
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
// whether to show popup
|
||||
show: Boolean,
|
||||
// overlay custom style
|
||||
overlayStyle: Object,
|
||||
// z-index
|
||||
zIndex: [Number, String],
|
||||
title: String,
|
||||
cancelText: {
|
||||
type: String,
|
||||
value: '取消',
|
||||
},
|
||||
description: String,
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
duration: {
|
||||
type: null,
|
||||
value: 300,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickOverlay() {
|
||||
this.$emit('click-overlay');
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.onClose();
|
||||
this.$emit('cancel');
|
||||
},
|
||||
|
||||
onSelect(event: Weapp.Event) {
|
||||
this.$emit('select', event.detail);
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
});
|
||||
46
packages/share-sheet/index.wxml
Normal file
46
packages/share-sheet/index.wxml
Normal file
@ -0,0 +1,46 @@
|
||||
<wxs src="./index.wxs" module="computed" />
|
||||
|
||||
<van-popup
|
||||
round
|
||||
class="van-share-sheet"
|
||||
show="{{ show }}"
|
||||
position="bottom"
|
||||
overlay="{{ overlay }}"
|
||||
duration="{{ duration }}"
|
||||
z-index="{{ zIndex }}"
|
||||
overlay-style="{{ overlayStyle }}"
|
||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
|
||||
bind:close="onClose"
|
||||
bind:click-overlay="onClickOverlay"
|
||||
>
|
||||
<view class="van-share-sheet__header">
|
||||
<view class="van-share-sheet__title">
|
||||
<slot name="title" />
|
||||
</view>
|
||||
<view wx:if="{{ title }}" class="van-share-sheet__title">{{ title }}</view>
|
||||
|
||||
<view class="van-share-sheet__description">
|
||||
<slot name="description" />
|
||||
</view>
|
||||
<view wx:if="{{ description }}" class="van-share-sheet__description">
|
||||
{{ description }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block wx:if="{{ computed.isMulti(options) }}">
|
||||
<options
|
||||
wx:for="{{ options }}"
|
||||
show-border="{{ index !== 0 }}"
|
||||
wx:key="index"
|
||||
options="{{ item }}"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</block>
|
||||
|
||||
<options wx:else options="{{ options }}" bind:select="onSelect" />
|
||||
|
||||
<button type="button" class="van-share-sheet__cancel" bindtap="onCancel">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
</van-popup>
|
||||
12
packages/share-sheet/index.wxs
Normal file
12
packages/share-sheet/index.wxs
Normal file
@ -0,0 +1,12 @@
|
||||
/* eslint-disable */
|
||||
function isMulti(options) {
|
||||
if (options == null || options[0] == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return "Array" === options.constructor && "Array" === options[0].constructor;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
isMulti: isMulti
|
||||
};
|
||||
3
packages/share-sheet/options.json
Normal file
3
packages/share-sheet/options.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
51
packages/share-sheet/options.less
Normal file
51
packages/share-sheet/options.less
Normal file
@ -0,0 +1,51 @@
|
||||
@import '../common/style/var';
|
||||
@import '../common/style/mixins/hairline.less';
|
||||
|
||||
.van-share-sheet {
|
||||
&__options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: @padding-md 0 @padding-md @padding-xs;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&--border::before {
|
||||
.hairline-top(@cell-border-color, @padding-md);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
opacity: @active-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: @share-sheet-icon-size;
|
||||
height: @share-sheet-icon-size;
|
||||
margin: 0 @padding-md;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-top: @padding-xs;
|
||||
padding: 0 @padding-base;
|
||||
color: @share-sheet-option-name-color;
|
||||
font-size: @share-sheet-option-name-font-size;
|
||||
}
|
||||
|
||||
&__option-description {
|
||||
padding: 0 @padding-base;
|
||||
color: @share-sheet-option-description-color;
|
||||
font-size: @share-sheet-option-description-font-size;
|
||||
}
|
||||
}
|
||||
16
packages/share-sheet/options.ts
Normal file
16
packages/share-sheet/options.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
options: Array,
|
||||
showBorder: Boolean,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect(event) {
|
||||
const { index } = event.currentTarget.dataset;
|
||||
const option = this.data.options[index];
|
||||
this.$emit('select', { ...option, index });
|
||||
},
|
||||
},
|
||||
});
|
||||
18
packages/share-sheet/options.wxml
Normal file
18
packages/share-sheet/options.wxml
Normal file
@ -0,0 +1,18 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="./options.wxs" module="computed" />
|
||||
|
||||
<view class="{{ utils.bem('share-sheet__options', { border: showBorder }) }}">
|
||||
<view
|
||||
wx:for="{{ options }}"
|
||||
wx:key="index"
|
||||
class="van-share-sheet__option"
|
||||
data-index="{{ index }}"
|
||||
bindtap="onSelect"
|
||||
>
|
||||
<image src="{{ computed.getIconURL(item.icon) }}" class="van-share-sheet__icon" />
|
||||
<view wx:if="{{ item.name }}" class="van-share-sheet__name">{{ item.name }}</view>
|
||||
<view wx:if="{{ item.description }}" class="van-share-sheet__option-description">
|
||||
{{ item.description }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
14
packages/share-sheet/options.wxs
Normal file
14
packages/share-sheet/options.wxs
Normal file
@ -0,0 +1,14 @@
|
||||
/* eslint-disable */
|
||||
var PRESET_ICONS = ['qq', 'weibo', 'wechat', 'link', 'qrcode', 'poster'];
|
||||
|
||||
function getIconURL(icon) {
|
||||
if (PRESET_ICONS.indexOf(icon) !== -1) {
|
||||
return 'https://img.yzcdn.cn/vant/share-icon-' + icon + '.png';
|
||||
}
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getIconURL: getIconURL,
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user