当先锋百科网

首页 1 2 3 4 5 6 7

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

  1. 首先要安装依赖：npm install --save vue-clipboard2
  2. 然后在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>