From 5582f8a5838ec046e1c938743a167177f77918b9 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 13:53:51 +0800
Subject: [PATCH] docs(Icon): use composition api

---
 src/icon/demo/index.vue | 84 ++++++++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 4b5f536c7..7273f31f1 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -95,7 +95,10 @@
 
 <script>
 import icons from '@vant/icons';
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { RED } from '../../utils/constant';
+import Notify from '../../notify';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str) {
@@ -121,44 +124,37 @@ function copyToClipboard(str) {
   }
 }
 
+const i18n = {
+  'zh-CN': {
+    title: '图标列表',
+    badge: '徽标提示',
+    basic: '基础图标',
+    copied: '复制成功',
+    outline: '线框风格',
+    filled: '实底风格',
+    demo: '用法示例',
+    color: '图标颜色',
+    size: '图标大小',
+  },
+  'en-US': {
+    title: 'Icon List',
+    badge: 'Show Badge',
+    basic: 'Basic',
+    copied: 'Copied',
+    outline: 'Outline',
+    filled: 'Filled',
+    demo: 'Demo',
+    color: 'Icon Color',
+    size: 'Icon Size',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      title: '图标列表',
-      badge: '徽标提示',
-      basic: '基础图标',
-      copied: '复制成功',
-      outline: '线框风格',
-      filled: '实底风格',
-      demo: '用法示例',
-      color: '图标颜色',
-      size: '图标大小',
-    },
-    'en-US': {
-      title: 'Icon List',
-      badge: 'Show Badge',
-      basic: 'Basic',
-      copied: 'Copied',
-      outline: 'Outline',
-      filled: 'Filled',
-      demo: 'Demo',
-      color: 'Icon Color',
-      size: 'Icon Size',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const tab = ref(0);
 
-  data() {
-    this.RED = RED;
-    this.icons = icons;
-    return {
-      tab: 0,
-      demoIcon: 'chat-o',
-      demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
-    };
-  },
-
-  methods: {
-    copy(icon, option = {}) {
+    const copy = (icon, option = {}) => {
       let tag = `<van-icon name="${icon}"`;
       if ('dot' in option) {
         tag = `${tag} ${option.dot ? 'dot' : ''}`;
@@ -175,13 +171,23 @@ export default {
       tag = `${tag} />`;
       copyToClipboard(tag);
 
-      this.$notify({
+      Notify({
         type: 'success',
         duration: 1500,
         className: 'demo-icon-notify',
-        message: `${this.t('copied')}：${tag}`,
+        message: `${t('copied')}：${tag}`,
       });
-    },
+    };
+
+    return {
+      t,
+      tab,
+      RED,
+      copy,
+      icons,
+      demoIcon: 'chat-o',
+      demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
+    };
   },
 };
 </script>