扩展 js复制内容到剪贴板

Posted 2022-02-22 胖鹅68

文章目录

• 一、参考
• 二、原理
• 三、代码实现
• 四、代码实现
• • 4.1 普通HTML代码中实现
  • 4.2 vue中 v-copy指令

一、参考

1. 分享8个非常实用的Vue自定义指令
2. document.execCommand MDN

二、原理

1. 动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
2. 将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
3. 选中值 textarea 并复制
4. 将 body 中插入的 textarea 移除
5. 在第一次调用时绑定事件，在解绑时移除事件

三、代码实现

• 参考 document.execCommand MDN
• 概念当一个html文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
• 常用的命令
  • copy 拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
  • cut 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
  • delete 删除选中部分.

四、代码实现

4.1 普通HTML代码中实现

<button onclick="copyToClip('内容')">Copy</button>
<script>
/**
 * 复制单行内容到粘贴板
 * content : 需要复制的内容
 * message : 复制完后的提示，不传则默认提示"复制成功"
 */
function copyToClip(content, message) 
  //  动态创建 textarea / input 标签
  var aux = document.createElement("input");
  aux.setAttribute("value", content);
  // 插入到 body
  document.body.appendChild(aux);
  // 选中值 textarea 并复制
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
  if (message == null) 
    alert("复制成功");
   else 
    alert(message);
  

</script>

4.2 vue中 v-copy指令

const copy = 
  bind(el,  value ) 
    el.$value = value
    el.handler = () => 
      if (!el.$value) 
        // 值为空的时候，给出提示。可根据项目UI仔细设计
        console.log('无复制内容')
        return
      
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 ios 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) 
        console.log('复制成功') // 可根据项目UI仔细设计
      
      document.body.removeChild(textarea)
    
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  ,
  // 当传进来的值更新的时候触发
  componentUpdated(el,  value ) 
    el.$value = value
  ,
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) 
    el.removeEventListener('click', el.handler)
  ,


export default copy