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
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelect(option) {
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
];
|
||||
|
||||
const onSelect = (option) => {
|
||||
Toast(option.name);
|
||||
this.showShare = false;
|
||||
},
|
||||
showShare.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
options,
|
||||
onSelect,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -56,23 +60,63 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
[
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ name: 'Link', icon: 'link' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
{ name: 'Weapp Qrcode', icon: 'weapp-qrcode' },
|
||||
],
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
[
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ 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
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link', description: 'Description' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
],
|
||||
options,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -31,26 +31,30 @@ app.use(ShareSheet);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSelect(option) {
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
];
|
||||
|
||||
const onSelect = (option) => {
|
||||
Toast(option.name);
|
||||
this.showShare = false;
|
||||
},
|
||||
showShare.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
options,
|
||||
onSelect,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -68,23 +72,28 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
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' },
|
||||
{ name: '小程序码', icon: 'weapp-qrcode' },
|
||||
],
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
[
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
{ name: '小程序码', icon: 'weapp-qrcode' },
|
||||
],
|
||||
];
|
||||
|
||||
return {
|
||||
options,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -99,24 +108,29 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 {
|
||||
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',
|
||||
},
|
||||
],
|
||||
options,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -136,17 +150,22 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link', description: '描述信息' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
options,
|
||||
showShare,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -40,121 +40,122 @@
|
||||
</demo-block>
|
||||
</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 {
|
||||
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',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const show = reactive({
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
});
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
const options = computed(() => [
|
||||
{ name: t('wechat'), icon: 'wechat' },
|
||||
{ name: t('weibo'), icon: 'weibo' },
|
||||
{ name: t('link'), icon: 'link' },
|
||||
{ name: t('poster'), icon: 'poster' },
|
||||
{ name: t('qrcode'), icon: 'qrcode' },
|
||||
]);
|
||||
|
||||
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: {
|
||||
options() {
|
||||
return [
|
||||
{ name: this.t('wechat'), icon: 'wechat' },
|
||||
{ name: this.t('weibo'), icon: 'weibo' },
|
||||
{ name: this.t('link'), icon: 'link' },
|
||||
{ name: this.t('poster'), icon: 'poster' },
|
||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
||||
];
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
return {
|
||||
t,
|
||||
show,
|
||||
options,
|
||||
onSelect,
|
||||
optionsWithDesc,
|
||||
multiLineOptions,
|
||||
customIconOptions,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user