This commit is contained in:
花裤衩 2019-09-29 17:35:27 +08:00
parent 4d2d52ef03
commit e76088d4d3
3 changed files with 46 additions and 23 deletions

View File

@ -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
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.on('success', () => {
clipboardSuccess()
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError()
clipboard.destroy()
})
clipboard.onClick(event)
}

View File

@ -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({

View File

@ -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 })
}
}
}