vue v-copy复制指令丨技术开发分享录

vue v-copy复制指令

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"**思路:**\n\n- 动态创建 `textarea` 标签,并设置 `readOnly` 属性及移出可视区域\n- 将要复制的值赋给 `textarea` 标签的 `value` 属性,并插入到 `body`\n- 选中值 `textarea` 并复制\n- 将 `body` 中插入的 `textarea` 移除\n- 在第一次调用时绑定事件,在解绑时移除事件\n\ndirectives/copy.js\n\n```\nconst copy = {\n  bind(el, { value }) {\n    el.$value = value\n    el.handler = () => {\n      if (!el.$value) {\n        // 值为空的时候,给出提示。可根据项目UI仔细设计\n        console.log('无复制内容')\n        return\n      }\n      // 动态创建 textarea 标签\n      const textarea = document.createElement('textarea')\n      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域\n      textarea.readOnly = 'readonly'\n      textarea.style.position = 'absolute'\n      textarea.style.left = '-9999px'\n      // 将要 copy 的值赋给 textarea 标签的 value 属性\n      textarea.value = el.$value\n      // 将 textarea 插入到 body 中\n      document.body.appendChild(textarea)\n      // 选中值并复制\n      textarea.select()\n      const result = document.execCommand('Copy')\n      if (result) {\n        console.log('复制成功') // 可根据项目UI仔细设计\n      }\n      document.body.removeChild(textarea)\n    }\n    // 绑定点击事件,就是所谓的一键 copy 啦\n    el.addEventListener('click', el.handler)\n  },\n  // 当传进来的值更新的时候触发\n  componentUpdated(el, { value }) {\n    el.$value = value\n  },\n  // 指令与元素解绑的时候,移除事件绑定\n  unbind(el) {\n    el.removeEventListener('click', el.handler)\n  },\n}\n\nexport default copy\n```\n\n在模板使用(index.vue)\n\n```html\n<template>\n  <button v-copy=\"copyText\">复制</button>\n</template>\n\n<script> export default {\n    data() {\n      return {\n        copyText: 'a copy directives',\n      }\n    },\n  }\n</script>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看