VUE 使用插件vue-clipboard2复制内容到剪切板

最新推荐文章于 2024-06-14 10:13:39 发布

超小盆友的媳妇儿

最新推荐文章于 2024-06-14 10:13:39 发布

阅读量1k

点赞数

分类专栏： vue.js 前端文章标签： vue-clipboard2

本文链接：https://blog.csdn.net/qq_37642495/article/details/91580226

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue.js

24 篇文章 0 订阅

订阅专栏

首先要安装依赖：npm install --save vue-clipboard2
然后在main.js中引入：
vue-cli：

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

常规用法：

<script src="vue.min.js"></script>
<!-- 必须在vue.js之后放置这一行 -->
<script src="vue-clipboard.min.js"></script>

在页面中（message是绑定的数据）：

<Button type="primary"
        style="width: 18%"
        v-clipboard:copy="message"
        v-clipboard:success="onCopy"    // 成功的返回函数
        v-clipboard:error="onError">复制到剪切板</Button>

还有一个办法是原生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>

超小盆友的媳妇儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 使用插件vue-clipboard2复制内容到剪切板

首先要安装依赖：npm install --save vue-clipboard2然后在main.js中引入：vue-cli：import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)常规用法：<script src="vue.min.js"></script><!-- 必须在vue...
复制链接

扫一扫

专栏目录