JS实现复制功能在项目中遇到了这个需求点击复制某块文字经过反复的查询资料解决了这个问题首先需要引用一个JS插件包clip

在项目中遇到了这个需求点击复制某块文字

经过反复的查询资料解决了这个问题

首先需要引用一个JS插件包 clipboard.js

插件的使用很简单，点击复制代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function-text</title>
</head>
<body>
    <div class="content">
         
    </div>
 
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="clipboardMin.js"></script>
 
    <script>
    for(var i = 0;i<5;i++){
        var p = `<p class='c'>${i}要被复制的内容</p>`;
        $('.content').append(p)
    }
 
    var s;
    $(".c").click(function(){
        s = $(this).text();
    })
    console.log(s)
    var clipboard = new Clipboard('.c', {
        text: function() {
             console.log(s)
            return s;
        }
    });
 
    clipboard.on('success', function(e) {
        alert("复制成功");
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

还有另外一种使用方法在vue中使用 html 部分

<template v-for="(item,index) in arr">
					<div>
						<p :id=`link${index}`>{{item}}{{item}}{{item}}</p>

						<button :class=`btn${index}` :data-clipboard-target=`#link${index}`>click {{item}}</button>
					</div>

			</template>

js部分

export default{
    data(){
    	return{
    		arr:[1,2,3,4,5]
    	}
    },
    mounted:function(){
    	for(var i=0;i<this.arr.length;i++){
    		var clipboard = new Clipboard(`.btn${i}`);
		    clipboard.on('success', function(e) {
			    alert("success")
			})
        }
    }
}

通过在按钮中设置data-clipboard-target来实现复制