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>