document点击复制功能

Vue与HTML中的文本复制功能实现

最新推荐文章于 2024-09-26 14:44:31 发布

原创最新推荐文章于 2024-09-26 14:44:31 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #html5

文章介绍了如何在HTML和Vue环境中实现文本复制的功能，通过创建动态input元素，赋值，选择文本并执行复制命令来达成。提供的代码示例展示了具体实现方法。

<script type='text/javascript'>
	function dianjifuzhi(data) {
		data = '要复制的内容，可以写死，也可以传，看实际需求，这里是传了，但写死的赋值，不需要写死的话，把这行删了即可，需要写死该内容即可';
        var ceshi = document.createElement('input');//创建一个input框
        ceshi.value = data;//输入框赋值
        document.body.appendChild(ceshi);//新增节点
        ceshi.select();//选择文本框
        console.log(ceshi.value);//打印瞅一眼
        document.execCommand('Copy');//复制
		ceshi.remove();//销毁
	},
</script>

以上函数写法仅适用于HTML，下边适用于vue。

<script type='text/javascript'>
	export default {
		data() {
			return {}
		},
		methods: {
			dianjifuzhi(data) {
				data = '要复制的内容，可以写死，也可以传，看实际需求，这里是传了，但写死的赋值，不需要写死的话，把这行删了即可，需要写死该内容即可';
        		var ceshi = document.createElement('input');//创建一个input框
        		ceshi.value = data;//输入框赋值
        		document.body.appendChild(ceshi);//新增节点
        		ceshi.select();//选择文本框
        		console.log(ceshi.value);//打印瞅一眼
        		document.execCommand('Copy');//复制
				ceshi.remove();//销毁
			},
		},
	}
</script>