feat(icon): click support to copy icon Type (#54)

Co-authored-by: 彧衡 <[email protected]>

Author: Alpsli

config/config.ts

@@ -32,6 +32,15 @@ export default {
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-WWGN4HC');
+    `,
+    `
+    if(window.location.pathname==='/components/icon'){
+      window.addEventListener('message', async (e) => {
+        if(e.data.iconType) {
+          await navigator.clipboard.writeText(e.data.iconType);
+        }
+      })
+    }
     `
   ],
   styles: [`

demo/pages/Icon/index.acss

@@ -5,21 +5,25 @@
 .sum {
   padding: 24rpx;
 }
-.sum > text {
+
+.sum>text {
   color: red;
 }
+
 .list-title {
   color: red;
   font-size: 32rpx;
   font-weight: bold;
   padding: 24rpx;
 }
+
 .icon-list {
   display: flex;
   flex-wrap: wrap;
   padding: 24rpx;
   background: #fff;
 }
+
 .icon-item {
   display: flex;
   flex-direction: row;
@@ -41,3 +45,11 @@
   word-wrap: break-word;
   word-break: break-all;
 }
+
+.icon-item-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}

demo/pages/Icon/index.axml

@@ -1,24 +1,29 @@
 <view class="demo">
   <search-bar placeholder="搜索" onInput="handleSearchChange" borderColor="#1677ff" />
   <view class="sum" a:if="{{!searchValue}}">
-    目前共有<text>{{iconTypes.length}}</text>个图标类型
+    目前共有
+    <text>{{iconTypes.length}}</text>个图标类型
   </view>
   <view class="list-title">
     线框风格
   </view>
   <view class="icon-list">
     <view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Outline') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
-      <am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
-      <text class="icon-desc">{{item}}</text>
+      <view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
+        <am-icon type="{{item}}" color="#1677ff" size="small" />
+        <text class="icon-desc">{{item}}</text>
+      </view>
     </view>
   </view>
   <view class="list-title">
     实底风格
   </view>
   <view class="icon-list">
     <view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Fill') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
-      <am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
-      <text class="icon-desc">{{item}}</text>
+      <view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
+        <am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
+        <text class="icon-desc">{{item}}</text>
+      </view>
     </view>
   </view>
 

demo/pages/Icon/index.js

@@ -160,8 +160,12 @@ Page({
     this.setData({ searchValue: value });
   },
   handleClickIcon(e) {
+    const { info } = e.target.dataset;
+
+    top.postMessage({ iconType: info }, '*');
+
     my.showToast({
-      content: `click ${e.currentTarget.dataset.info}`,
+      content: `${info} 已复制到剪贴板`,
     });
   },
 });