Fix(clipboard): remove duplicated success callback function for clipboard directive

Author: Armour

.circleci/config.yml

@@ -7,7 +7,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:11
+      - image: circleci/node:12
 
     working_directory: ~/vue-typescript-admin-template
 

package.json

@@ -17,93 +17,93 @@
     "@tinymce/tinymce-vue": "^2.1.0",
     "axios": "^0.19.0",
     "clipboard": "^2.0.4",
-    "codemirror": "^5.48.0",
+    "codemirror": "^5.48.2",
     "cors": "^2.8.5",
     "driver.js": "^0.9.7",
     "echarts": "^4.2.1",
-    "element-ui": "^2.10.1",
+    "element-ui": "^2.11.1",
     "faker": "^4.1.0",
     "file-saver": "^2.0.2",
     "fuse.js": "^3.4.5",
-    "js-cookie": "^2.2.0",
+    "js-cookie": "^2.2.1",
     "jsonlint": "^1.6.3",
     "jszip": "^3.2.2",
-    "lodash": "^4.17.14",
+    "lodash": "^4.17.15",
     "morgan": "^1.9.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^3.0.0",
     "register-service-worker": "^1.6.2",
-    "screenfull": "^4.2.0",
+    "screenfull": "^4.2.1",
     "script-loader": "^0.7.2",
     "sortablejs": "^1.9.0",
-    "tinymce": "^5.0.12",
-    "tui-editor": "^1.4.3",
+    "tinymce": "^5.0.13",
+    "tui-editor": "^1.4.5",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.12.0",
     "vue-image-crop-upload": "^2.5.0",
     "vue-property-decorator": "^8.2.1",
-    "vue-router": "^3.0.7",
+    "vue-router": "^3.1.1",
     "vue-splitpane": "^1.0.4",
     "vue-svgicon": "^3.2.6",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.1.1",
     "vuex-class": "^0.3.2",
     "vuex-module-decorators": "^0.9.9",
-    "xlsx": "^0.14.3",
+    "xlsx": "^0.15.0",
     "yamljs": "^0.3.0"
   },
   "devDependencies": {
     "@types/clipboard": "^2.0.1",
     "@types/codemirror": "^0.0.76",
-    "@types/compression": "^0.0.36",
+    "@types/compression": "^1.0.0",
     "@types/cors": "^2.8.5",
-    "@types/echarts": "^4.1.9",
+    "@types/echarts": "^4.1.10",
     "@types/express": "^4.17.0",
     "@types/faker": "^4.1.5",
     "@types/file-saver": "^2.0.1",
-    "@types/jest": "^24.0.15",
+    "@types/jest": "^24.0.17",
     "@types/js-cookie": "^2.2.2",
     "@types/jszip": "^3.1.6",
     "@types/lodash": "^4.14.136",
-    "@types/morgan": "^1.7.35",
+    "@types/morgan": "^1.7.36",
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.7.2",
     "@types/tinymce": "^4.5.22",
     "@types/webpack-env": "^1.14.0",
     "@types/yamljs": "^0.2.30",
-    "@vue/cli-plugin-babel": "^3.9.2",
-    "@vue/cli-plugin-e2e-cypress": "^3.9.0",
-    "@vue/cli-plugin-eslint": "^3.9.2",
-    "@vue/cli-plugin-pwa": "^3.9.0",
-    "@vue/cli-plugin-typescript": "^3.9.0",
-    "@vue/cli-plugin-unit-jest": "^3.9.0",
-    "@vue/cli-service": "^3.9.3",
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-e2e-cypress": "^3.10.0",
+    "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-plugin-pwa": "^3.10.0",
+    "@vue/cli-plugin-typescript": "^3.10.0",
+    "@vue/cli-plugin-unit-jest": "^3.10.0",
+    "@vue/cli-service": "^3.10.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.2",
     "concurrently": "^4.1.1",
-    "eslint": "^6.0.1",
+    "eslint": "^6.1.0",
     "eslint-plugin-vue": "^5.2.3",
     "fibers": "^4.0.1",
     "jest": "^24.8.0",
-    "lint-staged": "^9.2.0",
-    "sass": "^1.22.6",
+    "lint-staged": "^9.2.1",
+    "sass": "^1.22.9",
     "sass-loader": "^7.1.0",
     "style-resources-loader": "^1.2.1",
-    "swagger-routes-express": "^3.0.2",
+    "swagger-routes-express": "^3.0.3",
     "ts-jest": "^24.0.2",
     "ts-node-dev": "^1.0.0-pre.40",
     "typescript": "3.5.3",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.3",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.36.1"
+    "webpack": "^4.39.1"
   },
   "bugs": {
     "url": "https://github.com/armour/vue-typescript-admin-template/issues"

src/directives/clipboard/index.ts

@@ -1,53 +1,60 @@
 // Inspired by https://github.com/Inndy/vue-clipboard2
 import Clipboard from 'clipboard'
 import { DirectiveOptions } from 'vue'
-import { DirectiveBinding } from 'vue/types/options'
 
 if (!Clipboard) {
   throw new Error('you should npm install `clipboard` --save at first ')
 }
 
-let successCallback: Function
-let errorCallback: Function
-let clipboardInstance: Clipboard
-
-const updateClipboard = (el: HTMLElement, binding: DirectiveBinding) => {
-  if (binding.arg === 'success') {
-    successCallback = binding.value
-  } else if (binding.arg === 'error') {
-    errorCallback = binding.value
-  } else {
-    clipboardInstance = new Clipboard(el, {
-      text() { return binding.value },
-      action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
-    })
-    clipboardInstance.on('success', e => {
-      const callback = successCallback
-      callback && callback(e)
-    })
-    clipboardInstance.on('error', e => {
-      const callback = errorCallback
-      callback && callback(e)
-    })
-  }
-}
+let successCallback: Function | null
+let errorCallback: Function | null
+let clipboardInstance: Clipboard | null
 
 export const clipboard: DirectiveOptions = {
   bind(el, binding) {
-    updateClipboard(el, binding)
+    if (binding.arg === 'success') {
+      successCallback = binding.value
+    } else if (binding.arg === 'error') {
+      errorCallback = binding.value
+    } else {
+      clipboardInstance = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+      clipboardInstance.on('success', e => {
+        const callback = successCallback
+        callback && callback(e)
+      })
+      clipboardInstance.on('error', e => {
+        const callback = errorCallback
+        callback && callback(e)
+      })
+    }
   },
 
   update(el, binding) {
-    updateClipboard(el, binding)
+    if (binding.arg === 'success') {
+      successCallback = binding.value
+    } else if (binding.arg === 'error') {
+      errorCallback = binding.value
+    } else {
+      clipboardInstance = new Clipboard(el, {
+        text() { return binding.value },
+        action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
+      })
+    }
   },
 
-  unbind(el, binding) {
+  unbind(_, binding) {
     if (binding.arg === 'success') {
-      // ...
+      successCallback = null
     } else if (binding.arg === 'error') {
-      // ...
+      errorCallback = null
     } else {
-      clipboardInstance.destroy()
+      if (clipboardInstance) {
+        clipboardInstance.destroy()
+      }
+      clipboardInstance = null
     }
   }
 }