From 8d53ae125973691978ab5f161a094760955133e9 Mon Sep 17 00:00:00 2001 From: Pan Date: Wed, 27 Sep 2017 10:03:42 +0800 Subject: [PATCH] add:add clipboard --- package.json | 1 + src/directive/clipboard/clipboard.js | 49 ++++++++++++++++++++++++++++ src/directive/clipboard/index.js | 13 ++++++++ src/icons/svg/clipboard.svg | 1 + src/router/index.js | 8 +++++ src/utils/clipboard.js | 36 ++++++++++++++++++++ src/views/clipboard/index.vue | 2 ++ 7 files changed, 110 insertions(+) create mode 100644 src/directive/clipboard/clipboard.js create mode 100644 src/directive/clipboard/index.js create mode 100644 src/icons/svg/clipboard.svg create mode 100644 src/utils/clipboard.js create mode 100644 src/views/clipboard/index.vue diff --git a/package.json b/package.json index a80852a9..7eb5f228 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "axios": "0.16.2", + "clipboard": "1.7.1", "codemirror": "5.26.0", "dropzone": "5.1.0", "echarts": "3.6.2", diff --git a/src/directive/clipboard/clipboard.js b/src/directive/clipboard/clipboard.js new file mode 100644 index 00000000..49c9b391 --- /dev/null +++ b/src/directive/clipboard/clipboard.js @@ -0,0 +1,49 @@ +// Inspired by https://github.com/Inndy/vue-clipboard2 +const Clipboard = require('clipboard') +if (!Clipboard) { + throw new Error('you shold npm install `clipboard` --save at first ') +} + +export default { + bind(el, binding) { + if (binding.arg === 'success') { + el._v_clipboard_success = binding.value + } else if (binding.arg === 'error') { + el._v_clipboard_error = binding.value + } else { + const clipboard = new Clipboard(el, { + text() { return binding.value }, + action() { return binding.arg === 'cut' ? 'cut' : 'copy' } + }) + clipboard.on('success', e => { + const callback = el._v_clipboard_success + callback && callback(e) // eslint-disable-line + }) + clipboard.on('error', e => { + const callback = el._v_clipboard_error + callback && callback(e) // eslint-disable-line + }) + el._v_clipboard = clipboard + } + }, + update(el, binding) { + if (binding.arg === 'success') { + el._v_clipboard_success = binding.value + } else if (binding.arg === 'error') { + el._v_clipboard_error = binding.value + } else { + el._v_clipboard.text = function() { return binding.value } + el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' } + } + }, + unbind(el, binding) { + if (binding.arg === 'success') { + delete el._v_clipboard_success + } else if (binding.arg === 'error') { + delete el._v_clipboard_error + } else { + el._v_clipboard.destroy() + delete el._v_clipboard + } + } +} diff --git a/src/directive/clipboard/index.js b/src/directive/clipboard/index.js new file mode 100644 index 00000000..02c98163 --- /dev/null +++ b/src/directive/clipboard/index.js @@ -0,0 +1,13 @@ +import Clipboard from './clipboard' + +const install = function(Vue) { + Vue.directive('Clipboard', Clipboard) +} + +if (window.Vue) { + window.clipboard = Clipboard + Vue.use(install); // eslint-disable-line +} + +Clipboard.install = install +export default Clipboard diff --git a/src/icons/svg/clipboard.svg b/src/icons/svg/clipboard.svg new file mode 100644 index 00000000..cf1c9b0c --- /dev/null +++ b/src/icons/svg/clipboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index b50c7426..8bc6642b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -174,6 +174,14 @@ export const asyncRouterMap = [ noDropdown: true, children: [{ path: 'index', component: _import('theme/index'), name: '换肤' }] }, + { + path: '/clipboard', + component: Layout, + redirect: 'noredirect', + icon: 'clipboard', + noDropdown: true, + children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard' }] + }, { path: '*', redirect: '/404', hidden: true } ] diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js new file mode 100644 index 00000000..882b1251 --- /dev/null +++ b/src/utils/clipboard.js @@ -0,0 +1,36 @@ +import Clipboard from 'clipboard' +import Vue from 'vue' + +function clipboardSuccess() { + Vue.prototype.$message({ + message: '复制成功', + type: 'success', + duration: 1500 + }) +} + +function clipboardError() { + Vue.prototype.$message({ + message: '复制失败', + type: 'error' + }) +} + +export default function handleClipboard(text, event) { + const clipboard = new Clipboard(event.target, { + text: () => text + }) + clipboard.on('success', () => { + clipboardSuccess() + clipboard.off('error') + clipboard.off('success') + clipboard.destroy() + }) + clipboard.on('error', () => { + clipboardError() + clipboard.off('error') + clipboard.off('success') + clipboard.destroy() + }) + clipboard.onClick(event) +} diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue new file mode 100644 index 00000000..c1cf0c07 --- /dev/null +++ b/src/views/clipboard/index.vue @@ -0,0 +1,2 @@ +