当前位置：首页 > news >正文

Vue/html中点击复制到剪贴板

news 2025/8/12 23:50:08

1.使用JQ实现复制功能

html

   <div class="tran_one tran_yi"><div class="form-group"><textarea>文本</textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_one"><p>复制</p></div></div></div></div><div class="tran_one tran_two"><div class="form-group"><textarea></textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_two"><p>复制</p></div></div></div>

jq 封装后

 function copyToClipboard(selector, alertText) {// 获取指定选择器下的复制板块var $copyBlock = $(selector);// 获取textarea元素var $textarea = $copyBlock.find('textarea');// 复制内容到剪贴板if ($textarea.length > 0) {$textarea.select();document.execCommand('copy');// 显示复制成功的提示信息var $alert = $('<div class="copyAlert">' + (alertText || '复制成功') + '</div>');$copyBlock.append($alert);setTimeout(function () {$alert.fadeOut(function () {$(this).remove();});}, 3000);}}$('.tran_copy').click(function () {copyToClipboard($(this).closest('.tran_one'));});$('.tran_copy_two').click(function () {copyToClipboard($(this).closest('.tran_two'));});

2.使用Vue实现复制功能

html

    <div class="tran_one tran_yi"><div class="form-group"><textarea>{{mainTransContent}}</textarea></div><div class="form-group tran_group"><div class="tran_flex tran_left tran_copy tran_copy_one"@click="handleTranslateModalCopy(mainTransContent)"><p>复制</p></div></div></div>

创建了一个隐藏的textarea元素，并将需要复制的内容赋值给它，然后通过document.execCommand('copy')执行复制命令

  copyToClipboard(text) {const textarea = document.createElement('textarea');textarea.style.position = 'fixed';textarea.style.top = 0;textarea.style.left = 0;textarea.style.width = '1px';textarea.style.height = '1px';textarea.style.padding = 0;textarea.style.border = 'none';textarea.style.outline = 'none';textarea.style.boxShadow = 'none';textarea.style.background = 'transparent';textarea.value = text;document.body.appendChild(textarea);textarea.select();try {const successful = document.execCommand('copy');if (successful) {this.$message({message: '内容已成功复制到剪贴板！',type: 'success',});} else {console.log('复制失败');}} catch (err) {console.log('复制失败：', err);}document.body.removeChild(textarea);},

查看全文

http://www.lryc.cn/news/293869.html