安装
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

Logo

前往低代码交流专区

更多推荐