feat(ShareSheet): support multil line

This commit is contained in:
chenjiahan
2020-04-09 13:09:32 +08:00
committed by neverland
parent 68164e64cf
commit 1e2325c006
6 changed files with 163 additions and 12 deletions
+45 -1
View File
@@ -37,6 +37,7 @@ export default {
showShare: false,
options: [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: '复制链接', icon: 'link' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
@@ -52,6 +53,49 @@ export default {
};
```
### 展示面板标题
通过`title`属性可以设置面板标题,通过`description`属性可以设置标题下方的描述文字
```html
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
description="描述信息"
/>
```
### 展示多行选项
当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组代表一行选项
```html
<van-share-sheet v-model="showShare" :options="options" />
```
```js
export default {
data() {
return {
showShare: false,
options: [
[
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: 'QQ', icon: 'qq' },
],
[
{ name: '复制链接', icon: 'link' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
],
};
},
};
```
## API
### Props
@@ -70,7 +114,7 @@ export default {
| 键名 | 说明 | 类型 |
|------|------|------|
| name | 分享渠道名称 | *string* |
| icon | 图标,可选值为 `wechat` `link` `qrcode` `poster`,支持传入图片 URL | *string* |
| icon | 图标,可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`,支持传入图片 URL | *string* |
### Events