fix(view): 全局引入 vue-clipboard2

Author: lisgroup

admin/package.json

@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "axios": ">=0.18.1",
-    "clipboard": "^2.0.4",
     "echarts": "^4.2.1",
     "element-ui": "2.7.2",
     "js-cookie": "2.2.0",
@@ -30,6 +29,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-clipboard2": "^0.3.0",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "xlsx": "^0.14.3"

admin/src/main.js

@@ -19,6 +19,9 @@ import '@/permission' // permission control
 
 // set ElementUI lang to EN
 // Vue.use(ElementUI, { locale })
+import VueClipboard from 'vue-clipboard2'
+
+Vue.use(VueClipboard)
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false

admin/src/router/index.js

@@ -220,6 +220,7 @@ const routeBase = [
   { path: '/excel', name: 'excel', component: () => import('@/views/home/excel'), hidden: true },
   { path: '/upload', name: 'upload', component: () => import('@/views/home/upload'), hidden: true },
   { path: '/websocket', name: 'websocket', component: () => import('@/views/home/websocket'), hidden: true },
+  { path: '/clipboard', name: 'clipboard', component: () => import('@/views/home/clipboard'), hidden: true },
   { path: '/echarts', name: 'echarts', component: () => import('@/views/echarts/index'), hidden: true },
   // { path: '/index', component: () => import('@/views/home/index'), hidden: true },
   { path: '/login', component: () => import('@/views/login/index'), hidden: true },

admin/src/views/home/clipboard.vue

@@ -1,39 +1,30 @@
 <template>
-  <div>
-    <div slot="content" @click="copy">>点击复制</div>
-    <input type="text" class="tag-read" value="" v-model="input">
+  <div class="container">
+    <input v-model="message" type="text">
+    <button type="button" @click="doCopy('add me!')">Copy!</button>
   </div>
 </template>
-
-<script type="text/ecmascript-6">
-import Clipboard from 'clipboard'
-
+<script>
 export default {
-  name: 'Clipboard',
   data() {
     return {
-      input: 'Hello'
+      message: 'Copy These Text'
     }
   },
   methods: {
-    copy() {
-      const clipboard = new Clipboard('.tag-read')
-      clipboard.on('success', e => {
-        console.log('复制成功') // 这里你如果引入了elementui的提示就可以用，没有就注释即可
-        // 释放内存
-        clipboard.destroy()
-      })
-      clipboard.on('error', e => {
-        // 不支持复制
-        console.log('该浏览器不支持自动复制')
-        // 释放内存
-        clipboard.destroy()
+    dataProcessing(val) {
+      this.message = this.message + ' ' + val
+    },
+    doCopy(val) {
+      this.dataProcessing(val)
+      this.$copyText(this.message).then(function(e) {
+        alert('Copied')
+        console.log(e)
+      }, function(e) {
+        alert('Can not copy')
+        console.log(e)
       })
     }
   }
 }
 </script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-
-</style>