js - 复制功能

tools - 复制功能

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制</title>
</head>
 
<body>
    <input id="demoInput" value="copyValue" />
    <input type="button" onclick="copyValue()" value='copy' />
    <script>
      function copyValue(){
        const input = document.querySelector('#demoInput');
        input.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            alert('复制成功');
        }
      }
      function setCopyValue(){
        const text = document.createElement('textarea');
        text.value = value;
        document.body.appendChild(text);
        text.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            alert('复制成功');
        }
        text.remove()
      }
    </script>
</body>
 
</html>

vue

 // /utils/clipboard
import Vue from 'vue'
import Clipboard from 'clipboard'
 
function clipboardSuccess() {
  Vue.prototype.$message({
    message: 'Copy successfully',
    type: 'success',
    duration: 1500
  })
}
 
function clipboardError() {
  Vue.prototype.$message({
    message: 'Copy failed',
    type: 'error'
  })
}
 
export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

 // /utils/copyMixin
import clipboard from '@/utils/clipboard'
 
export default {
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}

 // 使用页面
<template>
<b @click="handleClipboard('复制复制复制',$event)">复制</b>
</template>
 
<script>
import copyMixin from '@/utils/copyMixin'
 
export default {
  mixins:[copyMixin],
}
</script>

posted @ 2021-11-28 12:04 zc-lee 阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

js - 复制功能

tools - 复制功能

vue

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>复制</title>
	</head>

	<body>
	<input id="demoInput" value="copyValue" />
	<input type="button" onclick="copyValue()" value='copy' />
	<script>
	function copyValue(){
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
	document.execCommand('copy');
	alert('复制成功');
	}
	}
	function setCopyValue(){
	const text = document.createElement('textarea');
	text.value = value;
	document.body.appendChild(text);
	text.select();
	if (document.execCommand('copy')) {
	document.execCommand('copy');
	alert('复制成功');
	}
	text.remove()
	}
	</script>
	</body>

	</html>

	// /utils/clipboard
	import Vue from 'vue'
	import Clipboard from 'clipboard'

	function clipboardSuccess() {
	Vue.prototype.$message({
	message: 'Copy successfully',
	type: 'success',
	duration: 1500
	})
	}

	function clipboardError() {
	Vue.prototype.$message({
	message: 'Copy failed',
	type: 'error'
	})
	}

	export default function handleClipboard(text, event) {
	const clipboard = new Clipboard(event.target, {
	text: () => text
	})
	clipboard.on('success', () => {
	clipboardSuccess()
	clipboard.destroy()
	})
	clipboard.on('error', () => {
	clipboardError()
	clipboard.destroy()
	})
	clipboard.onClick(event)
	}

	// /utils/copyMixin
	import clipboard from '@/utils/clipboard'

	export default {
	methods: {
	handleClipboard(text, event) {
	clipboard(text, event)
	}
	}
	}

	// 使用页面
	<template>
	<b @click="handleClipboard('复制复制复制',$event)">复制</b>
	</template>

	<script>
	import copyMixin from '@/utils/copyMixin'

	export default {
	mixins:[copyMixin],
	}
	</script>