clover
clover站长 Lv187
2022-06-07发布于“技术交流”
关注

代码复制功能测试

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	let idx = 1;

	$('.hu60_code code').each(function(){
		// 获取要复制的代码文本
		// let code_text = $(this).text();

		// 分配ID给代码文本
		let generate_id = 'wz_copy_code_' + idx;
                idx++;
		$(this).attr('id', generate_id);

		// 设置代码框相对定位
		$(this).parent().css('position', 'relative');

		// 创建复制按钮
		let copt_bth = $('<button class="btn">复制</button>').attr('data-clipboard-target', '#' + generate_id).css({
			position: 'absolute',
			top: 0,
			right: 0,
			background: 'radial-gradient(#6cc3fe, #21a1d0)',
			color: 'white',
			padding: '3px 6px',
			'font-weigth': 'bold',
			'animation-timing-function': 'ease-in-out',
			'animation-name': 'breathe',
		    'animation-duration': '2700ms',
		    'animation-iteration-count': 'infinite',
		    'animation-direction': 'alternate',
		});

		// 将复制按钮添加在代码框的右上角
		$(this).parent().prepend(copt_bth);
	});

	let clipboard = new ClipboardJS('.btn');

	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);

	    layer.msg('复制成功!');
    	
    	e.clearSelection();
	});

	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);

	    layer.msg('复制失败!');
	});
})
</script>

签名:成功其实很简单,就是当你坚持不住的时候,再坚持一下。

60 阅读
0 回复
0 点赞
发表评论
评论 0 排序方式
查看更多