mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(ShareSheet): use composition api
This commit is contained in:
chenjiahan
parent
615ac2cefb
commit
6ca5a63d34
@ -25,26 +25,30 @@ app.use(ShareSheet);
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
import { Toast } from 'vant';
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const showShare = ref(false);
|
||||||
showShare: false,
|
const options = [
|
||||||
options: [
|
{ name: 'Wechat', icon: 'wechat' },
|
||||||
{ name: 'Wechat', icon: 'wechat' },
|
{ name: 'Weibo', icon: 'weibo' },
|
||||||
{ name: 'Weibo', icon: 'weibo' },
|
{ name: 'Link', icon: 'link' },
|
||||||
{ name: 'Link', icon: 'link' },
|
{ name: 'Poster', icon: 'poster' },
|
||||||
{ name: 'Poster', icon: 'poster' },
|
{ name: 'Qrcode', icon: 'qrcode' },
|
||||||
{ name: 'Qrcode', icon: 'qrcode' },
|
];
|
||||||
],
|
|
||||||
};
|
const onSelect = (option) => {
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSelect(option) {
|
|
||||||
Toast(option.name);
|
Toast(option.name);
|
||||||
this.showShare = false;
|
showShare.value = false;
|
||||||
},
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
onSelect,
|
||||||
|
showShare,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
@ -56,23 +60,63 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const showShare = ref(false);
|
||||||
showShare: false,
|
const options = [
|
||||||
options: [
|
[
|
||||||
[
|
{ name: 'Wechat', icon: 'wechat' },
|
||||||
{ name: 'Wechat', icon: 'wechat' },
|
{ name: 'Weibo', icon: 'weibo' },
|
||||||
{ name: 'Weibo', icon: 'weibo' },
|
{ name: 'QQ', icon: 'qq' },
|
||||||
{ name: 'QQ', icon: 'qq' },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ name: 'Link', icon: 'link' },
|
|
||||||
{ name: 'Poster', icon: 'poster' },
|
|
||||||
{ name: 'Qrcode', icon: 'qrcode' },
|
|
||||||
{ name: 'Weapp Qrcode', icon: 'weapp-qrcode' },
|
|
||||||
],
|
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
{ name: 'Link', icon: 'link' },
|
||||||
|
{ name: 'Poster', icon: 'poster' },
|
||||||
|
{ name: 'Qrcode', icon: 'qrcode' },
|
||||||
|
{ name: 'Weapp Qrcode', icon: 'weapp-qrcode' },
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
showShare,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Icon
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-share-sheet v-model:show="showShare" :options="options" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const showShare = ref(false);
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
name: 'Name',
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Name',
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Name',
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
showShare,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -90,17 +134,22 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
|
const showShare = ref(false);
|
||||||
|
const options = [
|
||||||
|
{ name: 'Wechat', icon: 'wechat' },
|
||||||
|
{ name: 'Weibo', icon: 'weibo' },
|
||||||
|
{ name: 'Link', icon: 'link', description: 'Description' },
|
||||||
|
{ name: 'Poster', icon: 'poster' },
|
||||||
|
{ name: 'Qrcode', icon: 'qrcode' },
|
||||||
|
];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showShare: false,
|
options,
|
||||||
options: [
|
showShare,
|
||||||
{ name: 'Wechat', icon: 'wechat' },
|
|
||||||
{ name: 'Weibo', icon: 'weibo' },
|
|
||||||
{ name: 'Link', icon: 'link', description: 'Description' },
|
|
||||||
{ name: 'Poster', icon: 'poster' },
|
|
||||||
{ name: 'Qrcode', icon: 'qrcode' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -31,26 +31,30 @@ app.use(ShareSheet);
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
import { Toast } from 'vant';
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const showShare = ref(false);
|
||||||
showShare: false,
|
const options = [
|
||||||
options: [
|
{ name: '微信', icon: 'wechat' },
|
||||||
{ name: '微信', icon: 'wechat' },
|
{ name: '微博', icon: 'weibo' },
|
||||||
{ name: '微博', icon: 'weibo' },
|
{ name: '复制链接', icon: 'link' },
|
||||||
{ name: '复制链接', icon: 'link' },
|
{ name: '分享海报', icon: 'poster' },
|
||||||
{ name: '分享海报', icon: 'poster' },
|
{ name: '二维码', icon: 'qrcode' },
|
||||||
{ name: '二维码', icon: 'qrcode' },
|
];
|
||||||
],
|
|
||||||
};
|
const onSelect = (option) => {
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSelect(option) {
|
|
||||||
Toast(option.name);
|
Toast(option.name);
|
||||||
this.showShare = false;
|
showShare.value = false;
|
||||||
},
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
onSelect,
|
||||||
|
showShare,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
@ -68,23 +72,28 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const showShare = ref(false);
|
||||||
showShare: false,
|
const options = [
|
||||||
options: [
|
[
|
||||||
[
|
{ name: '微信', icon: 'wechat' },
|
||||||
{ name: '微信', icon: 'wechat' },
|
{ name: '微博', icon: 'weibo' },
|
||||||
{ name: '微博', icon: 'weibo' },
|
{ name: 'QQ', icon: 'qq' },
|
||||||
{ name: 'QQ', icon: 'qq' },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ name: '复制链接', icon: 'link' },
|
|
||||||
{ name: '分享海报', icon: 'poster' },
|
|
||||||
{ name: '二维码', icon: 'qrcode' },
|
|
||||||
{ name: '小程序码', icon: 'weapp-qrcode' },
|
|
||||||
],
|
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
{ name: '复制链接', icon: 'link' },
|
||||||
|
{ name: '分享海报', icon: 'poster' },
|
||||||
|
{ name: '二维码', icon: 'qrcode' },
|
||||||
|
{ name: '小程序码', icon: 'weapp-qrcode' },
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
options,
|
||||||
|
showShare,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -99,24 +108,29 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
|
const showShare = ref(false);
|
||||||
|
const 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',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showShare: false,
|
options,
|
||||||
options: [
|
showShare,
|
||||||
{
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -136,17 +150,22 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
setup() {
|
||||||
|
const showShare = ref(false);
|
||||||
|
const options = [
|
||||||
|
{ name: '微信', icon: 'wechat' },
|
||||||
|
{ name: '微博', icon: 'weibo' },
|
||||||
|
{ name: '复制链接', icon: 'link', description: '描述信息' },
|
||||||
|
{ name: '分享海报', icon: 'poster' },
|
||||||
|
{ name: '二维码', icon: 'qrcode' },
|
||||||
|
];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showShare: false,
|
options,
|
||||||
options: [
|
showShare,
|
||||||
{ name: '微信', icon: 'wechat' },
|
|
||||||
{ name: '微博', icon: 'weibo' },
|
|
||||||
{ name: '复制链接', icon: 'link', description: '描述信息' },
|
|
||||||
{ name: '分享海报', icon: 'poster' },
|
|
||||||
{ name: '二维码', icon: 'qrcode' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -40,121 +40,122 @@
|
|||||||
</demo-block>
|
</demo-block>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
|
import { computed, reactive } from 'vue';
|
||||||
|
import { useTranslate } from '@demo/use-translate';
|
||||||
|
import Toast from '../../toast';
|
||||||
|
|
||||||
|
const i18n = {
|
||||||
|
'zh-CN': {
|
||||||
|
qq: 'QQ',
|
||||||
|
name: '名称',
|
||||||
|
link: '复制链接',
|
||||||
|
title: '立即分享给好友',
|
||||||
|
weibo: '微博',
|
||||||
|
wechat: '微信',
|
||||||
|
poster: '分享海报',
|
||||||
|
qrcode: '二维码',
|
||||||
|
multiLine: '展示多行选项',
|
||||||
|
showSheet: '显示分享面板',
|
||||||
|
withDesc: '展示描述信息',
|
||||||
|
customIcon: '自定义图标',
|
||||||
|
description: '描述信息',
|
||||||
|
weappQrcode: '小程序码',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
qq: 'QQ',
|
||||||
|
name: 'Name',
|
||||||
|
link: 'Link',
|
||||||
|
title: 'Share',
|
||||||
|
weibo: 'Weibo',
|
||||||
|
wechat: 'Wechat',
|
||||||
|
poster: 'Poster',
|
||||||
|
qrcode: 'Qrcode',
|
||||||
|
multiLine: 'Multi Line',
|
||||||
|
showSheet: 'Show ShareSheet',
|
||||||
|
withDesc: 'Show Description',
|
||||||
|
customIcon: 'Custom Icon',
|
||||||
|
description: 'Description',
|
||||||
|
weappQrcode: 'Weapp Qrcode',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
i18n: {
|
setup() {
|
||||||
'zh-CN': {
|
const t = useTranslate(i18n);
|
||||||
qq: 'QQ',
|
const show = reactive({
|
||||||
name: '名称',
|
basic: false,
|
||||||
link: '复制链接',
|
withDesc: false,
|
||||||
title: '立即分享给好友',
|
multiLine: false,
|
||||||
weibo: '微博',
|
customIcon: false,
|
||||||
wechat: '微信',
|
});
|
||||||
poster: '分享海报',
|
|
||||||
qrcode: '二维码',
|
|
||||||
multiLine: '展示多行选项',
|
|
||||||
showSheet: '显示分享面板',
|
|
||||||
withDesc: '展示描述信息',
|
|
||||||
customIcon: '自定义图标',
|
|
||||||
description: '描述信息',
|
|
||||||
weappQrcode: '小程序码',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
qq: 'QQ',
|
|
||||||
name: 'Name',
|
|
||||||
link: 'Link',
|
|
||||||
title: 'Share',
|
|
||||||
weibo: 'Weibo',
|
|
||||||
wechat: 'Wechat',
|
|
||||||
poster: 'Poster',
|
|
||||||
qrcode: 'Qrcode',
|
|
||||||
multiLine: 'Multi Line',
|
|
||||||
showSheet: 'Show ShareSheet',
|
|
||||||
withDesc: 'Show Description',
|
|
||||||
customIcon: 'Custom Icon',
|
|
||||||
description: 'Description',
|
|
||||||
weappQrcode: 'Weapp Qrcode',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
const options = computed(() => [
|
||||||
return {
|
{ name: t('wechat'), icon: 'wechat' },
|
||||||
show: {
|
{ name: t('weibo'), icon: 'weibo' },
|
||||||
basic: false,
|
{ name: t('link'), icon: 'link' },
|
||||||
withDesc: false,
|
{ name: t('poster'), icon: 'poster' },
|
||||||
multiLine: false,
|
{ name: t('qrcode'), icon: 'qrcode' },
|
||||||
customIcon: false,
|
]);
|
||||||
|
|
||||||
|
const multiLineOptions = computed(() => [
|
||||||
|
[
|
||||||
|
{ name: t('wechat'), icon: 'wechat' },
|
||||||
|
{ name: t('weibo'), icon: 'weibo' },
|
||||||
|
{ name: t('qq'), icon: 'qq' },
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{ name: t('link'), icon: 'link' },
|
||||||
|
{ name: t('poster'), icon: 'poster' },
|
||||||
|
{ name: t('qrcode'), icon: 'qrcode' },
|
||||||
|
{ name: t('weappQrcode'), icon: 'weapp-qrcode' },
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const customIconOptions = computed(() => [
|
||||||
|
{
|
||||||
|
name: t('name'),
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: t('name'),
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('name'),
|
||||||
|
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const optionsWithDesc = computed(() => [
|
||||||
|
{ name: t('wechat'), icon: 'wechat' },
|
||||||
|
{ name: t('weibo'), icon: 'weibo' },
|
||||||
|
{
|
||||||
|
name: t('link'),
|
||||||
|
icon: 'link',
|
||||||
|
description: t('description'),
|
||||||
|
},
|
||||||
|
{ name: t('poster'), icon: 'poster' },
|
||||||
|
{ name: t('qrcode'), icon: 'qrcode' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const onSelect = (option: { name: string }) => {
|
||||||
|
Toast(option.name);
|
||||||
|
show.basic = false;
|
||||||
|
show.withDesc = false;
|
||||||
|
show.multiLine = false;
|
||||||
|
show.customIcon = false;
|
||||||
};
|
};
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
return {
|
||||||
options() {
|
t,
|
||||||
return [
|
show,
|
||||||
{ name: this.t('wechat'), icon: 'wechat' },
|
options,
|
||||||
{ name: this.t('weibo'), icon: 'weibo' },
|
onSelect,
|
||||||
{ name: this.t('link'), icon: 'link' },
|
optionsWithDesc,
|
||||||
{ name: this.t('poster'), icon: 'poster' },
|
multiLineOptions,
|
||||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
customIconOptions,
|
||||||
];
|
};
|
||||||
},
|
|
||||||
|
|
||||||
multiLineOptions() {
|
|
||||||
return [
|
|
||||||
[
|
|
||||||
{ name: this.t('wechat'), icon: 'wechat' },
|
|
||||||
{ name: this.t('weibo'), icon: 'weibo' },
|
|
||||||
{ name: this.t('qq'), icon: 'qq' },
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ name: this.t('link'), icon: 'link' },
|
|
||||||
{ name: this.t('poster'), icon: 'poster' },
|
|
||||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
|
||||||
{ name: this.t('weappQrcode'), icon: 'weapp-qrcode' },
|
|
||||||
],
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
customIconOptions() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
name: this.t('name'),
|
|
||||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.t('name'),
|
|
||||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.t('name'),
|
|
||||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
optionsWithDesc() {
|
|
||||||
return [
|
|
||||||
{ name: this.t('wechat'), icon: 'wechat' },
|
|
||||||
{ name: this.t('weibo'), icon: 'weibo' },
|
|
||||||
{
|
|
||||||
name: this.t('link'),
|
|
||||||
icon: 'link',
|
|
||||||
description: this.t('description'),
|
|
||||||
},
|
|
||||||
{ name: this.t('poster'), icon: 'poster' },
|
|
||||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
|
||||||
];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onSelect(option) {
|
|
||||||
this.$toast(option.name);
|
|
||||||
this.show.basic = false;
|
|
||||||
this.show.withDesc = false;
|
|
||||||
this.show.multiLine = false;
|
|
||||||
this.show.customIcon = false;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user