docs(ShareSheet): use composition api

src/share-sheet/README.md

@@ -25,26 +25,30 @@ app.use(ShareSheet);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      options: [
       { name: 'Wechat', icon: 'wechat' },
       { name: 'Weibo', icon: 'weibo' },
       { name: 'Link', icon: 'link' },
       { name: 'Poster', icon: 'poster' },
       { name: 'Qrcode', icon: 'qrcode' },
-      ],
+    ];
-    };
+
-  },
+    const onSelect = (option) => {
-  methods: {
-    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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      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,
     };
   },
 };

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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      options: [
       { name: '微信', icon: 'wechat' },
       { name: '微博', icon: 'weibo' },
       { name: '复制链接', icon: 'link' },
       { name: '分享海报', icon: 'poster' },
       { name: '二维码', icon: 'qrcode' },
-      ],
+    ];
-    };
+
-  },
+    const onSelect = (option) => {
-  methods: {
-    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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      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() {
+  setup() {
-    return {
+    const showShare = ref(false);
-      showShare: false,
+    const options = [
-      options: [
       { name: '微信', icon: 'wechat' },
       { name: '微博', icon: 'weibo' },
       { name: '复制链接', icon: 'link', description: '描述信息' },
       { name: '分享海报', icon: 'poster' },
       { name: '二维码', icon: 'qrcode' },
-      ],
+    ];
+
+    return {
+      options,
+      showShare,
     };
   },
 };

src/share-sheet/demo/index.vue

@@ -40,9 +40,12 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { computed, reactive } from 'vue';
-  i18n: {
+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() {
+export default {
-    return {
+  setup() {
-      show: {
+    const t = useTranslate(i18n);
+    const show = reactive({
       basic: false,
       withDesc: false,
       multiLine: false,
       customIcon: false,
-      },
+    });
-    };
-  },
 
-  computed: {
+    const options = computed(() => [
-    options() {
+      { name: t('wechat'), icon: 'wechat' },
-      return [
+      { name: t('weibo'), icon: 'weibo' },
-        { name: this.t('wechat'), icon: 'wechat' },
+      { name: t('link'), icon: 'link' },
-        { name: this.t('weibo'), icon: 'weibo' },
+      { name: t('poster'), icon: 'poster' },
-        { name: this.t('link'), icon: 'link' },
+      { name: t('qrcode'), icon: 'qrcode' },
-        { name: this.t('poster'), icon: 'poster' },
+    ]);
-        { name: this.t('qrcode'), icon: 'qrcode' },
-      ];
-    },
 
-    multiLineOptions() {
+    const multiLineOptions = computed(() => [
-      return [
       [
-          { name: this.t('wechat'), icon: 'wechat' },
+        { name: t('wechat'), icon: 'wechat' },
-          { name: this.t('weibo'), icon: 'weibo' },
+        { name: t('weibo'), icon: 'weibo' },
-          { name: this.t('qq'), icon: 'qq' },
+        { name: t('qq'), icon: 'qq' },
       ],
       [
-          { name: this.t('link'), icon: 'link' },
+        { name: t('link'), icon: 'link' },
-          { name: this.t('poster'), icon: 'poster' },
+        { name: t('poster'), icon: 'poster' },
-          { name: this.t('qrcode'), icon: 'qrcode' },
+        { name: t('qrcode'), icon: 'qrcode' },
-          { name: this.t('weappQrcode'), icon: 'weapp-qrcode' },
+        { name: t('weappQrcode'), icon: 'weapp-qrcode' },
       ],
-      ];
+    ]);
-    },
 
-    customIconOptions() {
+    const customIconOptions = computed(() => [
-      return [
       {
-          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() {
+    const optionsWithDesc = computed(() => [
-      return [
+      { name: t('wechat'), icon: 'wechat' },
-        { name: this.t('wechat'), icon: 'wechat' },
+      { name: t('weibo'), icon: 'weibo' },
-        { name: this.t('weibo'), icon: 'weibo' },
       {
-          name: this.t('link'),
+        name: t('link'),
         icon: 'link',
-          description: this.t('description'),
+        description: t('description'),
-        },
-        { name: this.t('poster'), icon: 'poster' },
-        { name: this.t('qrcode'), icon: 'qrcode' },
-      ];
-    },
       },
+      { name: t('poster'), icon: 'poster' },
+      { name: t('qrcode'), icon: 'qrcode' },
+    ]);
 
-  methods: {
+    const onSelect = (option: { name: string }) => {
-    onSelect(option) {
+      Toast(option.name);
-      this.$toast(option.name);
+      show.basic = false;
-      this.show.basic = false;
+      show.withDesc = false;
-      this.show.withDesc = false;
+      show.multiLine = false;
-      this.show.multiLine = false;
+      show.customIcon = false;
-      this.show.customIcon = false;
+    };
-    },
+
+    return {
+      t,
+      show,
+      options,
+      onSelect,
+      optionsWithDesc,
+      multiLineOptions,
+      customIconOptions,
+    };
   },
 };
 </script>