From cb92d0a6a24df437a80a6e8b09037a8aed7d5749 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 10 Sep 2019 11:54:37 +0800
Subject: [PATCH] docs(Icon): support copy icon name (#4409)

---
 src/icon/demo/index.vue | 76 +++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 65a434813..b04c8bb70 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -1,36 +1,20 @@
 <template>
   <demo-section>
-    <van-tabs
-      v-model="tab"
-      sticky
-      :color="BLUE"
-    >
+    <van-tabs v-model="tab" sticky :color="BLUE">
       <van-tab title="基础图标">
-        <van-col
-          v-for="icon in icons.basic"
-          :key="icon"
-          span="6"
-        >
+        <van-col v-for="icon in icons.basic" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
       <van-tab title="线框风格">
-        <van-col
-          v-for="icon in icons.outline"
-          :key="icon"
-          span="6"
-        >
+        <van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
       <van-tab title="实底风格">
-        <van-col
-          v-for="icon in icons.filled"
-          :key="icon"
-          span="6"
-        >
+        <van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
@@ -43,17 +27,43 @@
 import icons from '@vant/icons';
 import { BLUE } from '../../utils/constant';
 
+// from https://30secondsofcode.org
+function copyToClipboard(str) {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+
+  const selected =
+    document.getSelection().rangeCount > 0
+      ? document.getSelection().getRangeAt(0)
+      : false;
+
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+
+  if (selected) {
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(selected);
+  }
+}
+
 export default {
   i18n: {
     'zh-CN': {
       title: '图标列表',
       info: '显示徽标',
-      basic: '基础图标'
+      basic: '基础图标',
+      copied: '复制成功'
     },
     'en-US': {
       title: 'Icon List',
       info: 'Show Info',
-      basic: 'Basic Icon'
+      basic: 'Basic Icon',
+      copied: 'Copied'
     }
   },
 
@@ -63,6 +73,20 @@ export default {
     return {
       tab: 0
     };
+  },
+
+  methods: {
+    copy(icon) {
+      const tag = `<van-icon name="${icon}" />`;
+      copyToClipboard(tag);
+
+      this.$notify({
+        type: 'success',
+        duration: 1500,
+        className: 'demo-icon-notify',
+        message: `${this.$t('copied')}：${tag}`
+      });
+    }
   }
 };
 </script>
@@ -79,6 +103,10 @@ export default {
     padding-top: 10px;
   }
 
+  &-notify {
+    font-size: 13px;
+  }
+
   .van-col {
     display: inline-block;
     float: none;
@@ -93,6 +121,10 @@ export default {
       font-size: 12px;
       line-height: 18px;
     }
+
+    &:active {
+      background-color: @active-color;
+    }
   }
 
   .van-icon {