vue下实现复制操作
<template>
<div class="red">
<div @click="copyToClipboard($event)">
{{msg+222}}
</div>
<input type="text" ref="clickboard" v-model="msg">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:111111
}
},
methods:{
copyToClipboard(e){
// console.log(e)
console.log(e.target.value)
console.log(this.$refs.clickboard)
this.$refs.clickboard.select()
document.execCommand('copy')
}
}
}
</script>
<style scoped>
.red{
width: 100px;
height: 50px;
background:red;
}
.red input{
position: absolute;
top:-9999px;
opacity: 0;
transform:scale(0);
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
复制操作2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100%;
height: 50px;
background:aqua;
}
</style>
</head>
<body>
<div id="dd">222</div>
<script>
function Copy(str){
var save = function(e){
e.clipboardData.setData('text/plain', str);
e.preventDefault();
}
document.addEventListener('copy', save);
document.execCommand('copy');
document.removeEventListener('copy',save);
alert('复制成功！');
}
// $('#cardList').on('click', 'div.btn', function(){
// Copy($(this).prev('div').find('span.code').text());
// });
var dd = document.getElementById('dd')
dd.onclick = function(){
alert(2)
Copy(dd.innerText)
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
iphone下的复制操作支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width:800px;
height: 500px;
background:red;
cursor: pointer;
}
</style>
<body>
<div id="ee" onclick="aa()">12312312312</div>
<script>
function aa(){
var copyDOM = document.getElementById('ee');
// console.log(copyDOM)
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(copyDOM);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');
// alert(successful);
try {
var msg = successful ? 'successful' : 'unsuccessful';
alert('copy is' + msg);
} catch (err) {
alert('Oops, unable to copy');
}
// 移除选中的元素
window.getSelection().removeAllRanges();
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
vue使用复制功能推荐vue-clipboard2