diff --git a/breaking-changes.md b/breaking-changes.md
index ea43013c2..9c0db1385 100644
--- a/breaking-changes.md
+++ b/breaking-changes.md
@@ -6,6 +6,8 @@
- Circle: `v-model` 重命名为 `v-model:currentRate`
- Popup: `v-model` 重命名为 `v-model:show`
+- ShareSheet: `v-model` 重命名为 `v-model:show`
+- ActionSheet: `v-model` 重命名为 `v-model:show`
- Switch: v-model 对应的属性 `value` 重命名为 `modelValue`，事件由 `input` 重命名为 `update:modelValue`
- Sidebar: v-model 对应的属性 `activeKey` 重命名为 `modelValue`，事件由 `input` 重命名为 `update:modelValue`
- TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`
diff --git a/components.js b/components.js
index e00d27f28..571baf58b 100644
--- a/components.js
+++ b/components.js
@@ -32,4 +32,5 @@ module.exports = [
'sidebar',
'tree-select',
'notice-bar',
+ 'share-sheet',
];
diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index ec78dec72..8c2ebdd4d 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -16,7 +16,7 @@ Vue.use(ShareSheet);
```html
<van-cell title="Show ShareSheet" @click="showShare = true" />
<van-share-sheet
- v-model="showShare"
+ v-model:show="showShare"
title="Share"
:options="options"
@select="onSelect"
@@ -51,7 +51,7 @@ export default {
### Multi Line
```html
-<van-share-sheet v-model="showShare" title="Share" :options="options" />
+<van-share-sheet v-model:show="showShare" title="Share" :options="options" />
```
```js
@@ -80,7 +80,7 @@ export default {
```html
<van-share-sheet
- v-model="showShare"
+ v-model:show="showShare"
:options="options"
title="Share"
description="Description"
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index 2b14c5b8f..b8987f893 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -22,7 +22,7 @@ Vue.use(ShareSheet);
```html
<van-cell title="显示分享面板" @click="showShare = true" />
<van-share-sheet
- v-model="showShare"
+ v-model:show="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
@@ -60,7 +60,7 @@ export default {
```html
<van-share-sheet
- v-model="showShare"
+ v-model:show="showShare"
title="立即分享给好友"
:options="options"
/>
@@ -93,7 +93,7 @@ export default {
除了使用内置的几种图标外，可以直接在 `icon` 中传入图片 URL 来使用自定义的图标。
```html
-<van-share-sheet v-model="showShare" :options="options" />
+<van-share-sheet v-model:show="showShare" :options="options" />
```
```js
@@ -126,7 +126,7 @@ export default {
```html
<van-share-sheet
- v-model="showShare"
+ v-model:show="showShare"
:options="options"
title="立即分享给好友"
description="描述信息"
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index 62f042a33..733827c1c 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -3,7 +3,7 @@
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet
- v-model="show.basic"
+ v-model:show="show.basic"
:title="t('title')"
:options="options"
@select="onSelect"
@@ -17,7 +17,7 @@
@click="show.multiLine = true"
/>
<van-share-sheet
- v-model="show.multiLine"
+ v-model:show="show.multiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
@@ -31,7 +31,7 @@
@click="show.customIcon = true"
/>
<van-share-sheet
- v-model="show.customIcon"
+ v-model:show="show.customIcon"
:options="customIconOptions"
@select="onSelect"
/>
@@ -40,7 +40,7 @@
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet
- v-model="show.withDesc"
+ v-model:show="show.withDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"
diff --git a/src/share-sheet/index.js b/src/share-sheet/index.js
index 9dde4c5c4..63686cd06 100644
--- a/src/share-sheet/index.js
+++ b/src/share-sheet/index.js
@@ -15,6 +15,7 @@ export default createComponent({
props: {
...popupMixinProps,
title: String,
+ duration: [Number, String],
cancelText: String,
description: String,
getContainer: [String, Function],
@@ -40,6 +41,8 @@ export default createComponent({
},
},
+ emits: ['cancel', 'select', 'update:show', 'click-overlay'],
+
methods: {
onCancel() {
this.toggle(false);
@@ -51,7 +54,7 @@ export default createComponent({
},
toggle(val) {
- this.$emit('input', val);
+ this.$emit('update:show', val);
},
getIconURL(icon) {
@@ -63,8 +66,10 @@ export default createComponent({
},
genHeader() {
- const title = this.slots('title') || this.title;
- const description = this.slots('description') || this.description;
+ const title = this.$slots.title ? this.$slots.title() : this.title;
+ const description = this.$slots.description
+ ? this.$slots.description()
+ : this.description;
if (!title && !description) {
return;
@@ -132,8 +137,8 @@ export default createComponent({
return (
<Popup
round
+ show={this.show}
class={bem()}
- value={this.value}
position="bottom"
overlay={this.overlay}
duration={this.duration}
@@ -143,8 +148,10 @@ export default createComponent({
closeOnPopstate={this.closeOnPopstate}
closeOnClickOverlay={this.closeOnClickOverlay}
safeAreaInsetBottom={this.safeAreaInsetBottom}
- onInput={this.toggle}
- onClick-overlay={this.onClickOverlay}
+ {...{
+ 'onUpdate:show': this.toggle,
+ 'onClick-overlay': this.onClickOverlay,
+ }}
>
{this.genHeader()}
{this.genRows()}
diff --git a/vant.config.js b/vant.config.js
index b9f626054..3fe9e0859 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -208,10 +208,10 @@ module.exports = {
// path: 'pull-refresh',
// title: 'PullRefresh 下拉刷新',
// },
- // {
- // path: 'share-sheet',
- // title: 'ShareSheet 分享面板',
- // },
+ {
+ path: 'share-sheet',
+ title: 'ShareSheet 分享面板',
+ },
{
path: 'swipe-cell',
title: 'SwipeCell 滑动单元格',
@@ -542,10 +542,10 @@ module.exports = {
// path: 'pull-refresh',
// title: 'PullRefresh',
// },
- // {
- // path: 'share-sheet',
- // title: 'ShareSheet',
- // },
+ {
+ path: 'share-sheet',
+ title: 'ShareSheet',
+ },
{
path: 'swipe-cell',
title: 'SwipeCell',