blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-09-01 21:59:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(ShareSheet): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 17:51:56 +08:00
parent 615ac2cefb
commit 6ca5a63d34
3 changed files with 275 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/share-sheet/README.md
View File

@ -25,26 +25,30 @@ app.use(ShareSheet);
```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
data() {
return {
showShare: false,
options: [
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' },
],
};
},
methods: {
onSelect(option) {
];
const onSelect = (option) => {
Toast(option.name);
this.showShare = false;
},
showShare.value = false;
};
return {
options,
onSelect,
showShare,
};
},
};
```
@ -56,11 +60,12 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
showShare: false,
options: [
setup() {
const showShare = ref(false);
const options = [
[
{ name: 'Wechat', icon: 'wechat' },
{ name: 'Weibo', icon: 'weibo' },
@ -72,7 +77,46 @@ export default {
{ 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() {
return {
showShare: false,
options: [
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 {
options,
showShare,
};
},
};

71
src/share-sheet/README.zh-CN.md
View File

@ -31,26 +31,30 @@ app.use(ShareSheet);
```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
data() {
return {
showShare: false,
options: [
setup() {
const showShare = ref(false);
const options = [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: '复制链接', icon: 'link' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
};
},
methods: {
onSelect(option) {
];
const onSelect = (option) => {
Toast(option.name);
this.showShare = false;
},
showShare.value = false;
};
return {
options,
onSelect,
showShare,
};
},
};
```
@ -68,11 +72,12 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
showShare: false,
options: [
setup() {
const showShare = ref(false);
const options = [
[
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
@ -84,7 +89,11 @@ export default {
{ name: '二维码', icon: 'qrcode' },
{ name: '小程序码', icon: 'weapp-qrcode' },
],
],
];
return {
options,
showShare,
};
},
};
@ -99,11 +108,12 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
showShare: false,
options: [
setup() {
const showShare = ref(false);
const options = [
{
name: '名称',
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
@ -116,7 +126,11 @@ export default {
name: '名称',
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
},
],
];
return {
options,
showShare,
};
},
};
@ -136,17 +150,22 @@ export default {
```
```js
import { ref } from 'vue';
export default {
data() {
return {
showShare: false,
options: [
setup() {
const showShare = ref(false);
const options = [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: '复制链接', icon: 'link', description: '描述信息' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
];
return {
options,
showShare,
};
},
};

115
src/share-sheet/demo/index.vue
View File

@ -40,9 +40,12 @@
</demo-block>
</template>
<script>
export default {
i18n: {
<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: '名称',
@ -75,86 +78,84 @@ export default {
description: 'Description',
weappQrcode: 'Weapp Qrcode',
},
},
};
data() {
return {
show: {
export default {
setup() {
const t = useTranslate(i18n);
const show = reactive({
basic: false,
withDesc: false,
multiLine: false,
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' },
];
},
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' },
]);
multiLineOptions() {
return [
const multiLineOptions = computed(() => [
[
{ name: this.t('wechat'), icon: 'wechat' },
{ name: this.t('weibo'), icon: 'weibo' },
{ name: this.t('qq'), icon: 'qq' },
{ name: t('wechat'), icon: 'wechat' },
{ name: t('weibo'), icon: 'weibo' },
{ name: 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' },
{ name: t('link'), icon: 'link' },
{ name: t('poster'), icon: 'poster' },
{ name: t('qrcode'), icon: 'qrcode' },
{ name: t('weappQrcode'), icon: 'weapp-qrcode' },
],
];
},
]);
customIconOptions() {
return [
const customIconOptions = computed(() => [
{
name: this.t('name'),
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
},
{
name: this.t('name'),
name: t('name'),
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
},
{
name: this.t('name'),
name: 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' },
const optionsWithDesc = computed(() => [
{ name: t('wechat'), icon: 'wechat' },
{ name: t('weibo'), icon: 'weibo' },
{
name: this.t('link'),
name: t('link'),
icon: 'link',
description: this.t('description'),
},
{ name: this.t('poster'), icon: 'poster' },
{ name: this.t('qrcode'), icon: 'qrcode' },
];
},
description: t('description'),
},
{ name: t('poster'), icon: 'poster' },
{ name: 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;
},
const onSelect = (option: { name: string }) => {
Toast(option.name);
show.basic = false;
show.withDesc = false;
show.multiLine = false;
show.customIcon = false;
};
return {
t,
show,
options,
onSelect,
optionsWithDesc,
multiLineOptions,
customIconOptions,
};
},
};
</script>