vue 复制粘贴功能(进入页面获取剪切板中的内容)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)