vue项目如何实现剪切板功能--vue-clipboard2

最新推荐文章于 2024-05-30 08:42:49 发布

今天也在写bug

最新推荐文章于 2024-05-30 08:42:49 发布

阅读量5.7k

点赞数

分类专栏： vue 文章标签：剪切板 vue

本文链接：https://blog.csdn.net/qq_33485463/article/details/80454635

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、安装vue-clipboard2插件：

npm install --save vue-clipboard2

2、main.js添加

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调，在需要复制的地方调用

v-clipboard:copy="message"

　　v-clipboard:success="onCopy"

　　v-clipboard:error="onError"

另外补充：

原生js实现点击按钮，复制文本框中的的内容

<body>
    <textarea cols="20" rows="10" id="test">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
<script type="text/javascript">
function copyUrl2(){
    var Url2=document.getElementById("test");
    Url2.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("已复制好，可贴粘。");
}
</script>

今天也在写bug

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue项目如何实现剪切板功能--vue-clipboard2

1、安装vue-clipboard2插件：npm install --save vue-clipboard22、main.js添加import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调，在需要复制的地方调用v-clipboa...
复制链接

扫一扫