input、textare、div中通过 copy(默认) / cut 获取内容目标内容(cut剪切只能在input和textare中起作用)
方法一:
一、安装依赖
npm install clipboard --save
二、main.js引入
import Clipboard from 'clipboard'; Vue.prototype.Clipboard = Clipboard
三、button按钮添加如下属性
data-clipboard-target指向复印节点,这里指input的目标id
data-clipboard-action这里使用copy,同时也可以使用cut,则点击按钮后,内容里的值被剪切。
:data-clipboard-text指定你的 v-mode数据 {{ code }},@click方法是中需要使用id的值
四、完整代码
注意: 不用 :data-clipboard-text="code" 的话,可以使用 data-clipboard-action="copy/cut" 和 data-clipboard-target="#code"
以下两种写法皆可
clipboard.on("success", function (e) { });
clipboard.on("success", (e) => { });<template><div> <div id="code">{{ code }}</div> <button id="copy_text" ref="copy" data-clipboard-action="copy" :data-clipboard-text="code" @click="copy" >复制</button> </div>
</template> <script> export default { data() { return { code: "", }; }, mounted() {}, methods: { copy() { var clipboard = new this.Clipboard("#copy_text"); clipboard.on("success", (e) => { alert("复制成功"); clipboard.destroy(); }); clipboard.on("error", (e) => { // 不支持复制 Message({ message: "该浏览器不支持自动复制", type: "warning", }); // 释放内存 clipboard.destroy(); }); }, }, }; </script>
方法二:
无需下载依赖,直接在初始全局的 index.html 文件中,引用JS
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.1/clipboard.min.js">