-
Notifications
You must be signed in to change notification settings - Fork 2.5k
/
index.vue
82 lines (81 loc) · 2.48 KB
/
index.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<d2-container>
<template slot="header">剪贴板访问</template>
<el-row :gutter="10">
<el-col :span="12">
<div class="d2-mb">
<el-input v-model="text" style="width: 200px;"></el-input>
<el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
</div>
<el-button @click="copyHtml()">将 <span v-html="html"></span> 连带样式一起复制进剪贴板,然后去 Word 文档内粘贴</el-button>
</el-col>
<el-col :span="12">
<el-alert
class="d2-mb"
title="在 IE 浏览器或者高版本 Chrome 下你才可以通过下面这两个按钮获取剪贴板数据"
type="warning"
show-icon>
</el-alert>
<div class="d2-mb">
<el-tooltip content="需要 IE 浏览器" placement="top">
<el-button @click="readText">readText( )</el-button>
</el-tooltip>
<el-tooltip content="需要 IE 浏览器" placement="top">
<el-button @click="read">read( )</el-button>
</el-tooltip>
</div>
<el-input type="textarea" placeholder="在这里检验你的剪贴板 ( text/plain 数据 )"></el-input>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import clipboard from 'clipboard-polyfill'
export default {
data () {
return {
text: 'Hello ~',
html: '<span style="background-color: #19be6b; color: #f8f8f9;">Hello</span><span style="background-color: #495060; color: #f8f8f9;">World</span>'
}
},
methods: {
copyText () {
clipboard.writeText(this.text)
},
copyHtml () {
var dt = new clipboard.DT()
dt.setData('text/html', this.html)
clipboard.write(dt)
},
readText () {
clipboard.readText().then((res) => {
this.$message({
message: '读取成功 返回结果请查看控制台',
type: 'success'
})
}, err => {
console.log(err)
this.$message({
message: '错误信息已经打印到控制台',
type: 'error'
})
})
},
read () {
clipboard.read().then((res) => {
console.log(res)
this.$message({
message: '读取成功 返回结果请查看控制台',
type: 'success'
})
}, (err) => {
console.log(err)
this.$message({
message: '错误信息已经打印到控制台',
type: 'error'
})
})
}
}
}
</script>