From 13e82ea0dbff2ad6c68072d1193b1eb53bc634fd Mon Sep 17 00:00:00 2001 From: rex Date: Wed, 26 Aug 2020 15:18:19 +0800 Subject: [PATCH] feat(share-sheet): add new component (#3559) --- example/app.json | 6 +- example/config.js | 4 + example/pages/share-sheet/index.js | 82 +++++++++ example/pages/share-sheet/index.json | 3 + example/pages/share-sheet/index.wxml | 45 +++++ example/pages/share-sheet/index.wxss | 13 ++ example/project.config.json | 9 + packages/common/style/mixins/hairline.less | 22 ++- packages/common/style/var.less | 21 +++ packages/share-sheet/README.md | 195 +++++++++++++++++++++ packages/share-sheet/index.json | 7 + packages/share-sheet/index.less | 69 ++++++++ packages/share-sheet/index.ts | 58 ++++++ packages/share-sheet/index.wxml | 46 +++++ packages/share-sheet/index.wxs | 12 ++ packages/share-sheet/options.json | 3 + packages/share-sheet/options.less | 51 ++++++ packages/share-sheet/options.ts | 16 ++ packages/share-sheet/options.wxml | 18 ++ packages/share-sheet/options.wxs | 14 ++ 20 files changed, 686 insertions(+), 8 deletions(-) create mode 100644 example/pages/share-sheet/index.js create mode 100644 example/pages/share-sheet/index.json create mode 100644 example/pages/share-sheet/index.wxml create mode 100644 example/pages/share-sheet/index.wxss create mode 100644 packages/share-sheet/README.md create mode 100644 packages/share-sheet/index.json create mode 100644 packages/share-sheet/index.less create mode 100644 packages/share-sheet/index.ts create mode 100644 packages/share-sheet/index.wxml create mode 100644 packages/share-sheet/index.wxs create mode 100644 packages/share-sheet/options.json create mode 100644 packages/share-sheet/options.less create mode 100644 packages/share-sheet/options.ts create mode 100644 packages/share-sheet/options.wxml create mode 100644 packages/share-sheet/options.wxs diff --git a/example/app.json b/example/app.json index 8e43a2ce..4421f09c 100644 --- a/example/app.json +++ b/example/app.json @@ -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" } diff --git a/example/config.js b/example/config.js index cd571154..0a5e671d 100644 --- a/example/config.js +++ b/example/config.js @@ -115,6 +115,10 @@ export default [ path: '/overlay', title: 'Overlay 遮罩层', }, + { + path: '/share-sheet', + title: 'ShareSheet 分享面板', + }, { path: '/swipe-cell', title: 'SwipeCell 滑动单元格', diff --git a/example/pages/share-sheet/index.js b/example/pages/share-sheet/index.js new file mode 100644 index 00000000..e3feb42d --- /dev/null +++ b/example/pages/share-sheet/index.js @@ -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(); + }, +}); diff --git a/example/pages/share-sheet/index.json b/example/pages/share-sheet/index.json new file mode 100644 index 00000000..08d93c03 --- /dev/null +++ b/example/pages/share-sheet/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "Card 商品卡片" +} diff --git a/example/pages/share-sheet/index.wxml b/example/pages/share-sheet/index.wxml new file mode 100644 index 00000000..c4820977 --- /dev/null +++ b/example/pages/share-sheet/index.wxml @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/example/pages/share-sheet/index.wxss b/example/pages/share-sheet/index.wxss new file mode 100644 index 00000000..e621ddbe --- /dev/null +++ b/example/pages/share-sheet/index.wxss @@ -0,0 +1,13 @@ +.container { + height: 100vh; + background-color: #fff; +} + +.tag, +.button { + margin-right: 5px; +} + +.van-card__footer { + margin-top: 5px; +} diff --git a/example/project.config.json b/example/project.config.json index 9364efef..6e676f68 100644 --- a/example/project.config.json +++ b/example/project.config.json @@ -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 } ] diff --git a/packages/common/style/mixins/hairline.less b/packages/common/style/mixins/hairline.less index 571b452b..5fd2bb40 100644 --- a/packages/common/style/mixins/hairline.less +++ b/packages/common/style/mixins/hairline.less @@ -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); } diff --git a/packages/common/style/var.less b/packages/common/style/var.less index 3f80e8e6..7867e23e 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -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; diff --git a/packages/share-sheet/README.md b/packages/share-sheet/README.md new file mode 100644 index 00000000..fc1a1e81 --- /dev/null +++ b/packages/share-sheet/README.md @@ -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 + + +``` + +```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 + +``` + +```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 + +``` + +```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 + +``` + +```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 | 自定义描述文字 | diff --git a/packages/share-sheet/index.json b/packages/share-sheet/index.json new file mode 100644 index 00000000..15a7c224 --- /dev/null +++ b/packages/share-sheet/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "../popup/index", + "options": "./options" + } +} diff --git a/packages/share-sheet/index.less b/packages/share-sheet/index.less new file mode 100644 index 00000000..31569a2e --- /dev/null +++ b/packages/share-sheet/index.less @@ -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; + } + } +} diff --git a/packages/share-sheet/index.ts b/packages/share-sheet/index.ts new file mode 100644 index 00000000..e1211f61 --- /dev/null +++ b/packages/share-sheet/index.ts @@ -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'); + }, + }, +}); diff --git a/packages/share-sheet/index.wxml b/packages/share-sheet/index.wxml new file mode 100644 index 00000000..cefc3af4 --- /dev/null +++ b/packages/share-sheet/index.wxml @@ -0,0 +1,46 @@ + + + + + + + + {{ title }} + + + + + + {{ description }} + + + + + + + + + + + diff --git a/packages/share-sheet/index.wxs b/packages/share-sheet/index.wxs new file mode 100644 index 00000000..2149ee9e --- /dev/null +++ b/packages/share-sheet/index.wxs @@ -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 +}; diff --git a/packages/share-sheet/options.json b/packages/share-sheet/options.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/share-sheet/options.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/share-sheet/options.less b/packages/share-sheet/options.less new file mode 100644 index 00000000..ee4ff899 --- /dev/null +++ b/packages/share-sheet/options.less @@ -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; + } +} diff --git a/packages/share-sheet/options.ts b/packages/share-sheet/options.ts new file mode 100644 index 00000000..6991c177 --- /dev/null +++ b/packages/share-sheet/options.ts @@ -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 }); + }, + }, +}); diff --git a/packages/share-sheet/options.wxml b/packages/share-sheet/options.wxml new file mode 100644 index 00000000..cb38c7ec --- /dev/null +++ b/packages/share-sheet/options.wxml @@ -0,0 +1,18 @@ + + + + + + + {{ item.name }} + + {{ item.description }} + + + diff --git a/packages/share-sheet/options.wxs b/packages/share-sheet/options.wxs new file mode 100644 index 00000000..ab6033b9 --- /dev/null +++ b/packages/share-sheet/options.wxs @@ -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, +};