diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
new file mode 100644
index 000000000..53c27e9b3
--- /dev/null
+++ b/src/share-sheet/README.md
@@ -0,0 +1,46 @@
+# ShareSheet
+
+### Install
+
+```js
+import Vue from 'vue';
+import { ShareSheet } from 'vant';
+
+Vue.use(ShareSheet);
+```
+
+## Usage
+
+### Basic Usage
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| options | Share options | *Option[]* | `[]` |
+| title | Title | *string* | - |
+| cancel-text | Cancel button text | *string* | `'Cancel'` |
+| description | Description | *string* | - |
+
+### Data Structure of Option
+
+| Key | Description | Type |
+|------|------|------|
+| name | Option name | *string* |
+| icon | Option icon,can be set to `wechat` `link` `qrcode` `poster` or image URL | *string* |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| select | Triggered when click option | *option: Option, index: number* |
+| cancel | Triggered when click cancel button | - |
+
+### Slots
+
+| Name | Description |
+|------|------|
+| title | Custom title |
+| description | Custom description |
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
new file mode 100644
index 000000000..79f02d745
--- /dev/null
+++ b/src/share-sheet/README.zh-CN.md
@@ -0,0 +1,66 @@
+# ShareSheet 分享面板
+
+### 介绍
+
+底部弹起的模态面板,用于展示各分享渠道对应的操作按钮,不包含具体的分享逻辑。2.6 版本开始支持此组件。
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { ShareSheet } from 'vant';
+
+Vue.use(ShareSheet);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ options: [],
+ };
+ },
+};
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| options | 分享选项 | *Option[]* | `[]` |
+| title | 顶部标题 | *string* | - |
+| cancel-text | 取消按钮文字 | *string* | `'取消'` |
+| description | 标题下方的辅助描述文字 | *string* | - |
+
+### Option 数据结构
+
+`options`属性为一个对象数组,数组中的每个对象配置一列,对象可以包含以下值:
+
+| 键名 | 说明 | 类型 |
+|------|------|------|
+| name | 分享渠道名称 | *string* |
+| icon | 图标,可选值为 `wechat` `link` `qrcode` `poster`,支持传入图片 URL | *string* |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| select | 点击分享选项时触发 | *option: Option, index: number* |
+| cancel | 点击取消按钮时触发 | - |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| title | 自定义顶部标题 |
+| description | 自定义描述文字 |
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
new file mode 100644
index 000000000..ec368bea4
--- /dev/null
+++ b/src/share-sheet/demo/index.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js
new file mode 100644
index 000000000..9164d9a1c
--- /dev/null
+++ b/src/share-sheet/index.js
@@ -0,0 +1,97 @@
+// Utils
+import { createNamespace, isDef } from '../utils';
+
+// Mixins
+import { popupMixinProps } from '../mixins/popup';
+
+// Components
+import Popup from '../popup';
+
+const PRESET_ICONS = ['wechat', 'link', 'qrcode', 'poster'];
+
+const [createComponent, bem, t] = createNamespace('share-sheet');
+
+export default createComponent({
+ props: {
+ ...popupMixinProps,
+ title: String,
+ cancelText: String,
+ description: String,
+ options: {
+ type: Array,
+ default: () => [],
+ },
+ safeAreaInsetBottom: {
+ type: Boolean,
+ default: true,
+ },
+ },
+
+ methods: {
+ onCancel() {
+ this.toggle(false);
+ },
+
+ onSelect(option, index) {
+ this.$emit('select', option, index);
+ },
+
+ toggle(val) {
+ this.$emit('input', val);
+ },
+
+ getIconURL(icon) {
+ if (PRESET_ICONS.indexOf(icon) !== -1) {
+ return `https://img.yzcdn.cn/vant/share-icon-${icon}.svg`;
+ }
+
+ return icon;
+ },
+
+ genOptions() {
+ return (
+
+ {this.options.map((option, index) => (
+
{
+ this.onSelect(option, index);
+ }}
+ >
+
})
+
{option.name || ''}
+
+ ))}
+
+ );
+ },
+
+ genCancelText() {
+ const cancelText = isDef(this.cancelText) ? this.cancelText : t('cancel');
+
+ if (cancelText) {
+ return (
+
+ );
+ }
+ },
+ },
+
+ render() {
+ return (
+
+ {this.genOptions()}
+ {this.genCancelText()}
+
+ );
+ },
+});
diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less
new file mode 100644
index 000000000..36e0b4643
--- /dev/null
+++ b/src/share-sheet/index.less
@@ -0,0 +1,69 @@
+@import '../style/var';
+
+.van-share-sheet {
+ &__options {
+ display: flex;
+ padding: 16px 0 16px 24px;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+
+ // fix right-padding issue for overflow-x element
+ // see: https://stackoverflow.com/questions/10054870
+ &::after {
+ display: block;
+ width: 24px;
+ content: '';
+ }
+ }
+
+ &__option {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 32px;
+ cursor: pointer;
+ user-select: none;
+
+ &:last-child {
+ padding-right: 16px;
+ }
+
+ &:active {
+ opacity: @active-opacity;
+ }
+ }
+
+ &__icon {
+ width: 48px;
+ height: 48px;
+ }
+
+ &__name {
+ margin-top: 8px;
+ color: #646566;
+ font-size: 12px;
+ }
+
+ &__cancel {
+ display: block;
+ width: 100%;
+ padding: 0;
+ font-size: 16px;
+ line-height: 48px;
+ text-align: center;
+ background-color: @white;
+ border: none;
+ cursor: pointer;
+
+ &::before {
+ display: block;
+ height: 8px;
+ background-color: @background-color;
+ content: ' ';
+ }
+
+ &:active {
+ background-color: @active-color;
+ }
+ }
+}
diff --git a/src/share-sheet/test/__snapshots__/demo.spec.js.snap b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..8c7cde755
--- /dev/null
+++ b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
+`;
diff --git a/src/share-sheet/test/demo.spec.js b/src/share-sheet/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/share-sheet/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/vant.config.js b/vant.config.js
index 598f28c55..8361d0abb 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -177,7 +177,7 @@ module.exports = {
items: [
{
path: 'action-sheet',
- title: 'ActionSheet 上拉菜单',
+ title: 'ActionSheet 动作面板',
},
{
path: 'dialog',
@@ -203,6 +203,10 @@ module.exports = {
path: 'pull-refresh',
title: 'PullRefresh 下拉刷新',
},
+ {
+ path: 'share-sheet',
+ title: 'ShareSheet 分享面板',
+ },
{
path: 'swipe-cell',
title: 'SwipeCell 滑动单元格',
@@ -550,6 +554,10 @@ module.exports = {
path: 'pull-refresh',
title: 'PullRefresh',
},
+ {
+ path: 'share-sheet',
+ title: 'ShareSheet',
+ },
{
path: 'swipe-cell',
title: 'SwipeCell',