Vue implements copy to pasteboard function

Vue needs to rely on clipboard.js to implement the copy-to-pasteboard function

 

1. First you need to install dependencies  * If there is an error, you can try cnpm

npm install --save vue-clipboard2

　　

2. After the installation is successful, you can start using it

for vue-cli 

import Vue from 'vue' 
import VueClipboard from 'vue-clipboard2'

For regular usage

<script src="vue.min.js"></script>
<!-- This line must be placed after vue.js -->
<script src="vue-clipboard.min.js"></script>

 

3. Use of Dome:

<template>
  <div class="wxsmallcode-page publicCon">
    <div class="copyBox">
      sysAppId：<span>{{sysAppIds}}</span>
      <el-button class="ml10" type="text" size="medium"
        v-clipboard:copy="sysAppIds"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">点击复制</el-button>
    </div>
</template>

<script>
export default {
  data(){
    return {
      sysAppIds: 'xxxxxxxxxxxsx'
    }
  },
  methods: {
    // Copy successfully 
    onCopy(e){
      console.log(e);
    },
    // copy failed 
    onError(e){
      alert( "Failed" );
    },
  }
}
</script>

 

Note: cnpm is the command tool after Taobao mirror is installed