docs(Notify): use composition api

src/notify/README.md

@@ -65,19 +65,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+
-    };
+    const showNotify = () => {
-  },
+      show.value = true;
-  methods: {
-    showNotify() {
-      this.show = true;
       setTimeout(() => {
-        this.show = false;
+        show.value = false;
       }, 2000);
-    },
+    };
+
+    return {
+      show,
+      showNotify,
+    };
   },
 };
 ```

src/notify/README.zh-CN.md

@@ -102,19 +102,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+
-    };
+    const showNotify = () => {
-  },
+      show.value = true;
-  methods: {
-    showNotify() {
-      this.show = true;
       setTimeout(() => {
-        this.show = false;
+        show.value = false;
       }, 2000);
-    },
+    };
+
+    return {
+      show,
+      showNotify,
+    };
   },
 };
 ```

src/notify/demo/index.vue

@@ -23,15 +23,18 @@
     <van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
 
     <van-notify v-model:show="show" type="success">
-      <van-icon name="bell" style="margin-right: 4px;" />
+      <van-icon name="bell" style="margin-right: 4px" />
       <span>{{ t('content') }}</span>
     </van-notify>
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { ref } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+import Notify from '..';
+
+const i18n = {
   'zh-CN': {
     primary: '主要通知',
     success: '成功通知',
@@ -56,47 +59,55 @@ export default {
     componentCall: 'Component Call',
     customDuration: 'Custom Duration',
   },
-  },
+};
 
+export default {
   data() {
-    return {
+    const t = useTranslate(i18n);
-      show: false,
+    const show = ref(false);
+
+    const showNotify = () => {
+      Notify(t('content'));
     };
-  },
 
-  methods: {
+    const showCustomColor = () => {
-    showNotify() {
+      Notify({
-      this.$notify(this.t('content'));
-    },
-
-    showCustomColor() {
-      this.$notify({
-        message: this.t('customColor'),
         color: '#ad0000',
+        message: t('customColor'),
         background: '#ffe1e1',
       });
-    },
+    };
 
-    showCustomDuration() {
+    const showCustomDuration = () => {
-      this.$notify({
+      Notify({
-        message: this.t('customDuration'),
+        message: t('customDuration'),
         duration: 1000,
       });
-    },
+    };
 
-    showType(type) {
+    const showType = (type: string) => {
-      this.$notify({
+      Notify({
-        message: this.t('content'),
+        message: t('content'),
         type,
       });
-    },
+    };
 
-    showComponentCall() {
+    const showComponentCall = () => {
-      this.show = true;
+      show.value = true;
       setTimeout(() => {
-        this.show = false;
+        show.value = false;
       }, 2000);
-    },
+    };
+
+    return {
+      t,
+      show,
+      showType,
+      showNotify,
+      showCustomColor,
+      showComponentCall,
+      showCustomDuration,
+    };
   },
 };
 </script>