vue 复制粘贴功能(进入页面获取剪切板中的内容)
1、v-clipboard插件2、不用插件,进入页面获取剪切板中的内容1、v-clipboard插件1.安装依赖npm install --save v-clipboard2.在main.js中引入import Vue from 'vue'import Clipboard from 'v-clipboard'Vue.use(Clipboard)3.使用<template><but
·
1、v-clipboard插件
2、不用插件,进入页面获取剪切板中的内容
1、v-clipboard插件
1.安装依赖
npm install --save v-clipboard
2.在main.js中引入
import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)
3.使用
<template>
<button v-clipboard="value"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
Copy to clipboard
</button>
</template>
export default {
data() {
return {
value:'2659100297@qq.com'
}
},
methods: {
// Success event handler
onCopy({ value, event }){
console.log('success', value);
this.$message.success("已复制");
},
// Error event handler
onError({ value, event }) {
console.log('error', value)
}
}
}
2、不用插件,进入页面获取剪切板中的内容
<template>
<div>
<h2 class="t-center mt-10">复制组件</h2>
<div class="mt-15 p-10">
<el-input v-model="msg" placeholder="请输入内容"></el-input>
<br />
<span>{{str}}}</span>
<el-button type="primary" @click="copy">复制</el-button>
<div>下面是粘贴内容</div>
<el-input v-model="strCopy" placeholder="右键复制"></el-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
str: "点击按钮复制此内容",
strCopy: ""
};
},
mounted() {
this.getPaste();
},
watch: {},
methods: {
// 获取 粘贴板 内容
async getPaste() {
var val = await navigator.clipboard.readText();
this.msg = val;
},
//写入 粘贴板 内容
async copy() {
await navigator.clipboard.writeText(this.str);
}
}
};
</script>
<style lang="less" scoped>
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)