VueClipboard 实现复制功能

安装

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>

VueClipboard API

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