docs(Toast): use setup

src/toast/demo/index.vue

@@ -31,8 +31,10 @@
 </template>
 
 <script>
-export default {
+import { useTranslate } from '@demo/use-translate';
-  i18n: {
+import Toast from '..';
+
+const i18n = {
   'zh-CN': {
     fail: '失败提示',
     text: '提示内容',
@@ -69,71 +71,86 @@ export default {
     positionBottom: 'Bottom',
     customPosition: 'Custom Position',
   },
-  },
+};
 
-  methods: {
+export default {
-    showLoadingToast(loadingType) {
+  setup() {
-      this.$toast.loading({
+    const t = useTranslate(i18n);
+
+    const showLoadingToast = (loadingType) => {
+      Toast.loading({
         forbidClick: true,
-        message: this.t('loading'),
+        message: t('loading'),
         loadingType,
       });
-    },
+    };
 
-    showSuccessToast() {
+    const showSuccessToast = () => {
-      this.$toast.success(this.t('text2'));
+      Toast.success(t('text2'));
-    },
+    };
 
-    showFailToast() {
+    const showFailToast = () => {
-      this.$toast.fail(this.t('text3'));
+      Toast.fail(t('text3'));
-    },
+    };
 
-    showTopToast() {
+    const showTopToast = () => {
-      this.$toast({
+      Toast({
-        message: this.t('positionTop'),
+        message: t('positionTop'),
         position: 'top',
       });
-    },
+    };
 
-    showBottomToast() {
+    const showBottomToast = () => {
-      this.$toast({
+      Toast({
-        message: this.t('positionBottom'),
+        message: t('positionBottom'),
         position: 'bottom',
       });
-    },
+    };
 
-    showIconToast() {
+    const showIconToast = () => {
-      this.$toast({
+      Toast({
-        message: this.t('customIcon'),
+        message: t('customIcon'),
         icon: 'like-o',
       });
-    },
+    };
 
-    showImageToast() {
+    const showImageToast = () => {
-      this.$toast({
+      Toast({
-        message: this.t('customImage'),
+        message: t('customImage'),
         icon: 'https://img.yzcdn.cn/vant/logo.png',
       });
-    },
+    };
 
-    showCustomizedToast() {
+    const showCustomizedToast = () => {
-      const toast = this.$toast.loading({
+      const toast = Toast.loading({
         duration: 0,
         forbidClick: true,
-        message: this.t('text4', 3),
+        message: t('text4', 3),
       });
 
       let second = 3;
       const timer = setInterval(() => {
         second--;
         if (second) {
-          toast.message = this.t('text4', second);
+          toast.message = t('text4', second);
         } else {
           clearInterval(timer);
-          this.$toast.clear();
+          Toast.clear();
         }
       }, 1000);
-    },
+    };
+
+    return {
+      t,
+      showTopToast,
+      showFailToast,
+      showIconToast,
+      showImageToast,
+      showBottomToast,
+      showLoadingToast,
+      showSuccessToast,
+      showCustomizedToast,
+    };
   },
 };
 </script>