docs(ShareSheet): add custom icon demo

This commit is contained in:
chenjiahan
2020-04-09 13:09:32 +08:00
committed by neverland
parent 1e2325c006
commit fc4d89b474
3 changed files with 98 additions and 37 deletions
+26 -3
View File
@@ -20,7 +20,7 @@ Vue.use(ShareSheet);
分享面板通过`options`属性来定义分享选项,数组的每一项是一个对象,对象格式见文档下方表格。
```html
<van-cell @click="showShare = true" />
<van-cell title="显示分享面板" @click="showShare = true" />
<van-share-sheet
v-model="showShare"
:options="options"
@@ -60,15 +60,15 @@ export default {
```html
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
title="立即分享给好友"
description="描述信息"
/>
```
### 展示多行选项
当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组代表一行选项
当分享选项的数量较多时,可以将`options`定义为数组嵌套的格式,每个子数组会作为一行选项展示
```html
<van-share-sheet v-model="showShare" :options="options" />
@@ -96,6 +96,29 @@ export default {
};
```
### 自定义图标
除了使用内置的几种图标外,可以直接在`icon`中传入图片 URL 来使用自定义的图标
```html
<van-share-sheet v-model="showShare" :options="options" />
```
```js
export default {
data() {
return {
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' },
],
};
},
};
```
## API
### Props