From 6ca5a63d348c7235f3f16bed47b96e5c85561adc Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 17:51:56 +0800
Subject: [PATCH] docs(ShareSheet): use composition api
---
src/share-sheet/README.md | 129 +++++++++++++------
src/share-sheet/README.zh-CN.md | 131 +++++++++++--------
src/share-sheet/demo/index.vue | 221 ++++++++++++++++----------------
3 files changed, 275 insertions(+), 206 deletions(-)
diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 19a0d7c34..4501caf9c 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -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,
};
},
};
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index 6536322e0..335f96db4 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -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,
};
},
};
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index 2dde9fef8..8c4460377 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -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>