VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)

安装

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