Vue中剪贴板库v-clipboard工具使用案例

v-clipboard、vue-clipboard2剪贴板库

有时候复制动态内容会undefined

推荐使用方式二

安装

方式一
npm install --save v-clipboard

方式二
npm i --save vue-clipboard2

main.js引入

方式一
import Vue from 'vue'
import Clipboard from 'v-clipboard'

Vue.use(Clipboard)

方式二
import Clipboard from 'vue-clipboard2';
Clipboard.config.autoSetContainer = true;
Vue.use(Clipboard);

模板中调用

方式一和方式二 使用方式统一 

<template>
	<div>
		<button type="dashed"
		  v-clipboard:copy="code"
		  v-clipboard:success="copyAddress"
		  v-clipboard:error="copyAddressError"
		>复制内容</button>
	</div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      code : '20200829-20210324-20210329'
    };
  },

  methods:{

    // 复制
    copyAddress(e){
      console.log(e,"copyAddress");
    },

    copyAddressError(e){
      console.log(e,'copyAddressError');
    }
  }
};
</script>

javascript调用

使用方式

<template>
	<div>
		<p>当前运行环境:<strong>{{env}}编译环境</strong> <button type="dashed" @click="copy(env)">复制环境内容</button></p>
	</div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      env:'未设置运行环境',
    };
  },
  mounted(){
    console.log(process.env.VUE_APP_NODE_ENV,'运行环境')
    this.env = process.env.VUE_APP_NODE_ENV;
  },
  methods:{
	// 复制到剪贴板
    copy(e){
      console.log(e);
      this.$clipboard(e);
    },
  }
};
</script>