feat(share-sheet): add new component (#3559)

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"
 }

example/config.js

@@ -115,6 +115,10 @@ export default [
         path: '/overlay',
         title: 'Overlay 遮罩层',
       },
+      {
+        path: '/share-sheet',
+        title: 'ShareSheet 分享面板',
+      },
       {
         path: '/swipe-cell',
         title: 'SwipeCell 滑动单元格',

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();
+  },
+});

example/pages/share-sheet/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Card 商品卡片"
+}

example/pages/share-sheet/index.wxml

@@ -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" />

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;
+}

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
 				}
 			]

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);
 }

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;

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
+<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 | 自定义描述文字 |

packages/share-sheet/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "../popup/index",
+    "options": "./options"
+  }
+}

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;
+    }
+  }
+}

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');
+    },
+  },
+});

packages/share-sheet/index.wxml

@@ -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>

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
+};

packages/share-sheet/options.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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;
+  }
+}

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 });
+    },
+  },
+});

packages/share-sheet/options.wxml

@@ -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>

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,
+};