安裝

npm install --save vue-clipboard2

main.js

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

方式一

<template><div class="container"><input type="text" v-model="message"><button class="fs12"v-clipboard:copy="'地址：'+detail.address+'\n姓名：'+detail.name+'\n電話：'+detail.phone"v-clipboard:success="onCopy" v-clipboard:error="onError">復制</button></div> </template> <script>export default {data() {return {detail:{address:'地址',name:'名字',phone:'1234567'}}},methods: {onCopy: function (e) {alert('You just copied: ' + e.text)},onError: function (e) {console.log(e)alert('Failed to copy texts')}}} </script>

方式二

<template><div class="container"><button class="fs12" @click="copyCode">復制</button></div> </template> <script>export default {data() {return {detail:{address:'地址',name:'名字',phone:'1234567'}}},methods: {copyCode() {this.$copyText(`地址：${this.detail.address}\n收件人： ${this.detail.name}\n電話：${this.detail.phone}`).then(res => {console.log(res)this.$toast("已成功復制，可直接去粘貼");},err => {this.$toast("復制失敗");} )}}} </script>

API

https://www.npmjs.com/package/vue-clipboard2

總結

以上是生活随笔為你收集整理的VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。