docs(ShareSheet): add custom icon demo
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user