refactor

src/utils/clipboard.js

@@ -1,32 +1,47 @@
 import Vue from 'vue'
 import Clipboard from 'clipboard'
 
-function clipboardSuccess() {
+const VueClipboardConfig = {
+  autoSetContainer: false,
+  appendToBody: true // This fixes IE, see #50
+}
+
+function clipboardSuccess(successText) {
   Vue.prototype.$message({
-    message: 'Copy successfully',
+    message: successText || 'Copy successfully',
     type: 'success',
     duration: 1500
   })
 }
 
-function clipboardError() {
+function clipboardError(errorText) {
   Vue.prototype.$message({
-    message: 'Copy failed',
+    message: errorText || 'Copy failed',
     type: 'error'
   })
 }
 
-export default function handleClipboard(text, event) {
-  const clipboard = new Clipboard(event.target, {
-    text: () => text
-  })
-  clipboard.on('success', () => {
-    clipboardSuccess()
-    clipboard.destroy()
-  })
-  clipboard.on('error', () => {
-    clipboardError()
-    clipboard.destroy()
+export default function handleClipboard({ text, container, successText, errorText } = {}) {
+  return new Promise(function(resolve, reject) {
+    var fakeElement = document.createElement('button')
+    var clipboard = new Clipboard(fakeElement, {
+      text: function() { return text },
+      action: function() { return 'copy' },
+      container: typeof container === 'object' ? container : document.body
+    })
+
+    clipboard.on('success', function(e) {
+      clipboard.destroy()
+      clipboardSuccess(successText)
+      resolve(e)
+    })
+    clipboard.on('error', function(e) {
+      clipboard.destroy()
+      clipboardError(errorText)
+      reject(e)
+    })
+    if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement)
+    fakeElement.click()
+    if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement)
   })
-  clipboard.onClick(event)
 }

src/views/clipboard/index.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="app-container">
+
+    <aside>
+      <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/clipboard.html">Documentation</a>
+    </aside>
+
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
         <el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
-        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
+        <el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData)">
           copy
         </el-button>
       </el-tab-pane>
@@ -33,8 +38,11 @@ export default {
     }
   },
   methods: {
-    handleCopy(text, event) {
-      clip(text, event)
+    handleCopy(text) {
+      // return a promise
+      clip({ text: text }).then(() => {
+        console.log('success')
+      })
     },
     clipboardSuccess() {
       this.$message({

src/views/icons/index.vue

@@ -6,7 +6,7 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item))">
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateIconCode(item) }}
@@ -19,7 +19,7 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item))">
           <el-tooltip placement="top">
             <div slot="content">
               {{ generateElementIconCode(item) }}
@@ -55,8 +55,8 @@ export default {
     generateElementIconCode(symbol) {
       return `<i class="el-icon-${symbol}" />`
     },
-    handleClipboard(text, event) {
-      clipboard(text, event)
+    handleClipboard(text) {
+      clipboard({ text: text })
     }
   }
 }