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

感谢大佬分享，更多内容点击这里
感谢

vue 复制粘贴功能（进入页面获取剪切板中的内容）相关推荐

【vim】系统剪切板、vim寄存器之间的复制粘贴操作命令？系统剪切板中的内容复制粘贴到命令行？vim文本中复制粘贴到命令行
一.系统剪切板和文本内容的复制粘贴 1.1 从系统剪切板复制粘贴到文本中需要操作3次: 分别是英文双引号.一个加号或梅花号,最后是一个p 也即"+p 或者直接使用组合键[Shift + i ...
C#实现WinForm下DataGridView控件从剪切板中进行内容粘贴
DataGridView是C#中在处理显示表格数据时常用的控件,但是在使用过程中,会发现复制DataGridView控件中的内容比较容易,而把剪切板中拷贝的内容黏贴到DataGridView控件中比较 ...
java 获取剪切板_Java中有关剪切板的操作
本地剪贴板只在当前虚拟机中有效.Java允许多个本地剪贴板同时存在,可以方便地通过剪贴板的名称来进行存取访问. 系统剪贴板与同等操作系统直接关连,允许应用程序与运行在该操作系统下的其它程序之间进行信息 ...
如何获取windows剪切板中内容
一个简单的获取windows剪切板中文本内容的代码 // 获取剪切板中的内容public static String getClipboardText() {Clipboard clip = Tool ...
计算机编辑功能在哪,注册表编辑器怎么打开-电脑的剪切板在哪里电脑剪切板里面的内容怎么修改...
使用Windows系统,经常用到就是 "复制"."剪切"."粘贴" 的操作步骤.有时不小心将剪切板中的内容粘贴到某个不知名的地方,导致存储空 ...
Winform中实现将照片剪贴到系统剪切板中(附代码下载)
场景效果点击剪切按钮点击粘贴按钮注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免 ...
clipboard + element-ui +vue 实现复制粘贴功能与提示
结合 clipboard.js 实现复制.粘贴功能剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现) 想要知道怎么使用,优先参考官方文档(如何指定要复制 ...
vue element 表格内的复制粘贴功能
最近项目里面为了方便用户增加了复制粘贴功能来更方便的处理数据要求如下: 点击复制把此条的数据复制点击粘贴粘贴到最后一行复制粘贴按钮做个权限该出现的出现不该出现的消失 <el- ...
js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 初步想法: 1. 获取到需要复制的内容,这里我可以将需要复制的内容放在input或者t ...
每次打开百度太麻烦？用程序直接打开网页 Python实现百度划词搜索功能（获取剪切板数据）
浏览顺序实现划词功能运行错误解决问题转载声明实现划词功能说是划词翻译,实际上我们是通过获取用户的剪切板内容,通过一系列的操作得到的.首先呢,我们就先实现如何获取剪切板内容的程序首先先在桌 ...

vue 复制粘贴功能（进入页面获取剪切板中的内容）

vue 复制粘贴功能（进入页面获取剪切板中的内容）相关推荐

最新文章

热门文章