官网(推荐):
https://www.npmjs.com/package/vue-clipboard2
安装
npm install --save vue-clipboard2
引入
import Vue from 'vue' import Clipboard from 'vue-clipboard2' Vue.use(Clipboard)
vue文件中使用
<template> <div> <button type="dashed" v-clipboard:copy="code" v-clipboard:success="copyAddress" v-clipboard:error="copyAddressError" >复制内容</button> </div> </template> <script> export default { name: "Home", data() { return { code : '20200829-20210324-20210329' }; }, methods:{ // 复制 copyAddress(e){ console.log(e,"copyAddress"); }, copyAddressError(e){ console.log(e,'copyAddressError'); } } }; </script>
vue文件方法中直接调用
<div id="app"></div> <template id="t"> <div class="container"> <input type="text" v-model="message"> <button type="button" @click="doCopy">Copy!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Can not copy') console.log(e) }) } } }) </script>