mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 18:54:24 +00:00
113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<template>
|
|
<demo-section>
|
|
<demo-block :title="t('basicUsage')">
|
|
<van-cell
|
|
is-link
|
|
:title="t('showSheet')"
|
|
@click="showBasicSheet = true"
|
|
/>
|
|
<van-share-sheet
|
|
v-model="showBasicSheet"
|
|
:options="options"
|
|
@select="onSelect"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('withTitle')">
|
|
<van-cell
|
|
is-link
|
|
:title="t('showSheet')"
|
|
@click="showTitleSheet = true"
|
|
/>
|
|
<van-share-sheet
|
|
v-model="showTitleSheet"
|
|
:title="t('title')"
|
|
:options="options"
|
|
:description="t('description')"
|
|
@select="onSelect"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('multiLine')">
|
|
<van-cell
|
|
is-link
|
|
:title="t('showSheet')"
|
|
@click="showMultiRowSheet = true"
|
|
/>
|
|
<van-share-sheet
|
|
v-model="showMultiRowSheet"
|
|
:options="multiLineOptions"
|
|
@select="onSelect"
|
|
/>
|
|
</demo-block>
|
|
</demo-section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
link: '复制链接',
|
|
title: '立即分享给好友',
|
|
wechat: '微信',
|
|
poster: '分享海报',
|
|
qrcode: '二维码',
|
|
multiLine: '多行展示',
|
|
showSheet: '显示分享面板',
|
|
withTitle: '展示带标题的面板',
|
|
description: '描述信息',
|
|
},
|
|
'en-US': {
|
|
link: 'Link',
|
|
title: 'Share with friends',
|
|
wechat: 'Wechat',
|
|
poster: 'Poster',
|
|
qrcode: 'Qrcode',
|
|
multiLine: 'Multi Line',
|
|
showSheet: 'Show ShareSheet',
|
|
withTitle: 'Show ShareSheet with title',
|
|
description: 'Description',
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showBasicSheet: false,
|
|
showTitleSheet: false,
|
|
showMultiRowSheet: false,
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.options = [
|
|
{ name: this.t('wechat'), icon: 'wechat' },
|
|
{ name: this.t('link'), icon: 'link' },
|
|
{ name: this.t('poster'), icon: 'poster' },
|
|
{ name: this.t('qrcode'), icon: 'qrcode' },
|
|
];
|
|
|
|
this.multiLineOptions = [
|
|
[{ name: this.t('wechat'), icon: 'wechat' }],
|
|
[
|
|
{ name: this.t('link'), icon: 'link' },
|
|
{ name: this.t('poster'), icon: 'poster' },
|
|
{ name: this.t('qrcode'), icon: 'qrcode' },
|
|
],
|
|
];
|
|
},
|
|
|
|
methods: {
|
|
onSelect(option) {
|
|
this.$toast(option.name);
|
|
this.showBasicSheet = false;
|
|
this.showTitleSheet = false;
|
|
this.showMultiRowSheet = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import '../../style/var';
|
|
</style>
|