copy.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /*
  2. 需求:实现一键复制文本内容,用于鼠标右键粘贴。
  3. 思路:
  4. 1、动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域
  5. 2、将要复制的值赋给 textarea 标签的 value 属性,并插入到 body
  6. 3、选中值 textarea 并复制
  7. 4、将 body 中插入的 textarea 移除
  8. 5、在第一次调用时绑定事件,在解绑时移除事件
  9. 使用:给 Dom 加上 v-copy 及复制的文本即可
  10. 例子:<button v-copy="copyText">一键复制</button>
  11. */
  12. export default {
  13. bind(el, { value }) {
  14. el.$value = value
  15. el.handler = () => {
  16. if (!el.$value) {
  17. // 值为空的时候,给出提示。可根据项目UI仔细设计
  18. console.log('无复制内容')
  19. return
  20. }
  21. // 动态创建 textarea 标签
  22. const textarea = document.createElement('textarea')
  23. // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
  24. textarea.readOnly = 'readonly'
  25. textarea.style.position = 'absolute'
  26. textarea.style.left = '-9999px'
  27. // 将要 copy 的值赋给 textarea 标签的 value 属性
  28. textarea.value = el.$value
  29. // 将 textarea 插入到 body 中
  30. document.body.appendChild(textarea)
  31. // 选中值并复制
  32. textarea.select()
  33. const result = document.execCommand('Copy')
  34. if (result) {
  35. console.log('复制成功') // 可根据项目UI仔细设计
  36. }
  37. document.body.removeChild(textarea)
  38. }
  39. // 绑定点击事件,就是所谓的一键 copy 啦
  40. el.addEventListener('click', el.handler)
  41. },
  42. // 当传进来的值更新的时候触发
  43. componentUpdated(el, { value }) {
  44. el.$value = value
  45. },
  46. // 指令与元素解绑的时候,移除事件绑定
  47. unbind(el) {
  48. el.removeEventListener('click', el.handler)
  49. },
  50. }