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>