vue 点击按钮复制指定内容到剪切板，复制变量值到剪切板

1.安装插件

npm install --save vue-clipboard2

或者

cnpm install --save vue-clipboard2

2.main.js引入，或者在使用的组件页面引入，这里在main.js引入

import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)

3.使用demo

<template> <div class="copyBox"> 复制的内容：<span>{{copyText}}</span> <el-button type="text" size="medium" v-clipboard:copy="copyText" //绑定变量 v-clipboard:success="onCopy" v-clipboard:error="onError" >点我复制</el-button> </div> </template> <script> export default { ... //vue其他代码 data(){ return{ copyText:'欢迎访问 Dream_xu 的博客！' } } methods: { onCopy(){ this.$message.success('复制成功') }, onError(){ this.$message.console.error('复制失败'); } } </script>