添加复制到剪贴板的功能

package-lock.json

@@ -4565,6 +4565,16 @@
       "integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmmirror.com/clipboard/download/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/clipboardy/download/clipboardy-2.3.0.tgz?cache=0&sync_timestamp=1634141778549&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fclipboardy%2Fdownload%2Fclipboardy-2.3.0.tgz",
@@ -5803,6 +5813,11 @@
       "resolved": "http://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/download/delegate-3.2.0.tgz",
+      "integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
@@ -8436,6 +8451,14 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/download/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "9.6.0",
       "resolved": "https://registry.npmmirror.com/got/download/got-9.6.0.tgz",
@@ -13600,6 +13623,11 @@
         "node-gyp-build": "^4.2.0"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/download/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -14909,6 +14937,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -15720,6 +15753,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.6.tgz",
       "integrity": "sha1-hHHgN7jkdi9aRkaG4Z5a/HCFAuQ="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard2/download/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "videojs-contrib-hls": "^5.15.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-clipboard2": "^0.3.3",
     "vue-fullpage.js": "^0.1.7",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",

src/components/market/TopUserInfo.vue

@@ -5,6 +5,9 @@
       <span class="address">{{showAccount}}</span>
       <img
         class="icCopy" width="24" height="24"
+        v-clipboard:copy="account"
+        v-clipboard:success="onCopy"
+        v-clipboard:error="onCopyError"
         src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
     </div>
     <span class="label">Balance</span>
@@ -35,6 +38,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { BlockChain } from '@/utils/blockchain'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
+import { Message } from 'element-ui'
 
 @Component({
   name: 'TopUserInfo',
@@ -51,9 +55,29 @@ export default class extends Vue {
     return UserModule.accountShow
   }
 
+  get account() {
+    return UserModule.account
+  }
+
   async disconnectWallet() {
     return this.bc.disconnect()
   }
+
+  onCopy(e: any) {
+    Message({
+      message: 'You just copied accountId',
+      type: 'success',
+      duration: 5 * 1000
+    })
+  }
+
+  onCopyError(e: any) {
+    Message({
+      message: 'Failed to copy texts',
+      type: 'error',
+      duration: 5 * 1000
+    })
+  }
 }
 </script>
 

src/main.ts

@@ -4,9 +4,11 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
+import VueClipboard from 'vue-clipboard2'
 import 'video.js/dist/video-js.css'
 
 Vue.use(ElementUI)
+Vue.use(VueClipboard)
 Vue.config.productionTip = false
 
 new Vue({