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>

vue-clipboard2.js 的 API

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

原文链接：https://blog.csdn.net/qq_34035425/article/details/88197335

• 上一篇： Vue 路由懒加载使用import 报错
• 下一篇： elementui图片查看器