Vue2+Element u实现点击按钮复制文字功能

最新推荐文章于 2024-09-06 22:20:29 发布

无名氏zzz

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量97

点赞数 1

本文链接：https://blog.csdn.net/m0_46714106/article/details/141354740

版权

<el-input readonly v-model="someWords"/>
<el-button type="primary" @click="handleCopy(someWords)">复制</el-button>

handleCopy(val) {
  const text = val
  // https安全协议下，使用navigator
  if (navigator.clipboard && navigator.clipboard.writeText) {  
    navigator.clipboard.writeText(text).then(() => {  
      console.log('复制成功~');  
    }).catch(err => {  
      console.error('复制失败: ', err);  
    });  
  } else { 
    // (本地开发时）http非安全协议下，navigator.clipboard.writeText无法使用，使用document.execCommand
    const textarea = document.createElement('textarea');  
    textarea.value = text;  
    textarea.style.position = 'fixed';
    document.body.appendChild(textarea);  
    textarea.select();  
    try {  
      document.execCommand('copy');  
      console.log('复制成功~');  
    } catch (err) {  
      console.error('复制失败:', err);  
    }  
    document.body.removeChild(textarea);  
  } 
},