no message
Former-commit-id: 0a96bb54e9270e451e59b72e00e35053a7c0e152 Former-commit-id: c250ba90da6546626b9831847630aae786c88344 Former-commit-id: c1182b1bdc6ea9b3934275286a93e2760a643bfe
This commit is contained in:
71
src/pages/demo/plugins/clipboard-polyfill/demo.vue
Normal file
71
src/pages/demo/plugins/clipboard-polyfill/demo.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<Container>
|
||||
<GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="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="mb"
|
||||
title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<div class="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>
|
||||
</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) => {
|
||||
console.log(res)
|
||||
this.$Message.success('读取成功 返回结果请查看控制台')
|
||||
}, (err) => {
|
||||
console.log(err)
|
||||
this.$Message.error('错误信息已经打印到控制台')
|
||||
})
|
||||
},
|
||||
read () {
|
||||
clipboard.read().then((res) => {
|
||||
console.log(res)
|
||||
this.$Message.success('读取成功 返回结果请查看控制台')
|
||||
}, (err) => {
|
||||
console.log(err)
|
||||
this.$Message.error('错误信息已经打印到控制台')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
9
src/pages/demo/plugins/clipboard-polyfill/readme.vue
Normal file
9
src/pages/demo/plugins/clipboard-polyfill/readme.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<Container>
|
||||
<p slot="title">README.md</p>
|
||||
<p slot="more"><GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink></p>
|
||||
<div>
|
||||
<Markdown url="https://raw.githubusercontent.com/lgarron/clipboard-polyfill/master/README.md"></Markdown>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
Reference in New Issue
Block a user