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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值