From 497f36a2d36f94c1b625f232428e082131c5d828 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 17:00:10 +0800
Subject: [PATCH] docs(Style): use composition api

---
 src/notify/demo/index.vue |  2 +-
 src/style/demo/index.vue  | 74 ++++++++++++++++++++++-----------------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index 7a10b2b57..80240999c 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -62,7 +62,7 @@ const i18n = {
 };
 
 export default {
-  data() {
+  setup() {
     const t = useTranslate(i18n);
     const show = ref(false);
 
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index 959d8e27a..fb45368f9 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -21,46 +21,54 @@
   </transition>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      hairline: '1px 边框',
-      ellipsis: '文字省略',
-      animation: '动画',
-      toggle: '切换动画',
-      text1: '这是一段最多显示一行的文字，后面的内容会省略',
-      text2:
-        '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
-    },
-    'en-US': {
-      hairline: 'Hairline',
-      ellipsis: 'Text Ellipsis',
-      animation: 'Animation',
-      toggle: 'Switch animation',
-      text1:
-        'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
-      text2:
-        'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    hairline: '1px 边框',
+    ellipsis: '文字省略',
+    animation: '动画',
+    toggle: '切换动画',
+    text1: '这是一段最多显示一行的文字，后面的内容会省略',
+    text2:
+      '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
+  },
+  'en-US': {
+    hairline: 'Hairline',
+    ellipsis: 'Text Ellipsis',
+    animation: 'Animation',
+    toggle: 'Switch animation',
+    text1:
+      'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+    text2:
+      'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       show: false,
       transitionName: '',
-    };
-  },
+    });
 
-  methods: {
-    animate(transitionName) {
-      this.show = true;
-      this.transitionName = transitionName;
+    const animate = (transitionName: string) => {
+      state.show = true;
+      state.transitionName = transitionName;
 
       setTimeout(() => {
-        this.show = false;
+        state.show = false;
       }, 500);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      animate,
+    };
   },
 };
 </script>