Vue一键复制功能--clipboard.js组件

下载引入组件clipboard组件：

npm install clipboard --save
或者
yarn add clipboard --save

单页面引入：

import Clipboard from 'clipboard';

全局挂载引入：

import Clipboard from 'clipboard';
Vue.prototype.Clipboard = Clipboard; 

！！！本案例单页面引入

 使用：一般分为两种：点击按钮复制和点击文本复制

效果图：

<el-dialog title="一键复制" :visible.sync="dialogVisible" width="30%">
	<div>
		<div class="row center text">
           <el-tooltip placement="top">
				<div slot="content">点击一键复制</div>
				<span class="span_style copyBtn" :data-clipboard-text="qrLink" @click="copyLink()">{{qrLink}}</span>
			</el-tooltip>
		</div>
		<div class="row center text">
           <span class="span_style" id="clipboardText">心中若无烦心事，便是人生好时节。</span>
		</div>
	</div>
	<span slot="footer" class="dialog-footer">
		<el-button class="copyBtn" type="primary" data-clipboard-action="copy" data-clipboard-target="#clipboardText" @click="copyLink()">一键复制</el-button>
	</span>
</el-dialog>

import Clipboard from 'clipboard';
export default {
	data() {
		return {
			dialogVisible: false,
			qrLink: '春有百花秋望月，夏有冷风冬听雪。'	
		}
	},
    methods: {
	    copyLink() { //一键复制
            //let clipboard = new this.Clipboard('.copyBtn')//全局挂载引用
		    let clipboard = new Clipboard('.copyBtn')
		    clipboard.on('success', e => {
		    	this.$message.success('复制成功');
                e.clearSelection(); //清除选中
		    	clipboard.destroy() //释放内存
		    })
		    clipboard.on('error', e => {
		    	this.$message.error('此浏览器不支持自动复制');
	   	    })
	    },
    }
}

1、点击按钮复制：

<span class="span_style" id="clipboardText">心中若无烦心事，便是人生好时节。</span>
<el-button class="copyBtn" type="primary" data-clipboard-action="copy" data-clipboard-target="#clipboardText" @click="copyLink()">一键复制</el-button>

2、点击文本复制：

<span class="span_style copyBtn" :data-clipboard-text="qrLink" @click="copyLink()">{{qrLink}}</span>