docs(Style): use composition api

src/notify/demo/index.vue

@@ -62,7 +62,7 @@ const i18n = {
 };
 
 export default {
-  data() {
+  setup() {
     const t = useTranslate(i18n);
     const show = ref(false);
 

src/style/demo/index.vue

@@ -21,9 +21,11 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     hairline: '1px 边框',
     ellipsis: '文字省略',
@@ -43,24 +45,30 @@ export default {
     text2:
       'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       show: false,
       transitionName: '',
-    };
+    });
-  },
 
-  methods: {
+    const animate = (transitionName: string) => {
-    animate(transitionName) {
+      state.show = true;
-      this.show = true;
+      state.transitionName = transitionName;
-      this.transitionName = transitionName;
 
       setTimeout(() => {
-        this.show = false;
+        state.show = false;
       }, 500);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      animate,
+    };
   },
 };
 </script>