项目中遇到一个问题。在微信中打开一个h5页面判读如果是微信就提示用户用使用分享到朋友圈的按钮。如果不是在微信中打开,希望点击按钮以后,希望能复制页面的链接地址到剪切板上。提示用户在其它浏览器中打开。
试了好几种办法。发现无法兼容。
项目中遇到一个问题。在微信中打开一个h5页面判读如果是微信就提示用户用使用分享到朋友圈的按钮。如果不是在微信中打开,希望点击按钮以后,希望能复制页面的链接地址到剪切板上。提示用户在其它浏览器中打开。
试了好几种办法。发现无法兼容。
点击按钮复制文本
————第三方库:官网:https://clipboardjs.com/
——1. npm install clipboard --save or import Clipboard from 'clipboard'
——2. 通过data-clipboard-target在触发器元素中添加属性来实现。在此属性中包含的值需要与另一个元素选择器匹配。
<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput" @click="copyLink">点我复制</button>
——3.在 <script>标签中加载。
3.1:import ClipboardJS from '../../../node_modules/clipboard/dist/clipboard.min'
3.2:写方法 copyLink ,做出相对应的响应。
3.3:参考:https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
————源生:document.execCommand()
——1.先获取元素:getElementById(''),p 标签的话记得要再加上 .innertext 才会获取才 value.
——2.element.select(): 选中你要复制的文本。有时候会用到 element.focus(), 因为调用element.select()不一定会集中输入,因此经常使用HTMLElement.focus()。
——3.document.execCommand('copy') 复制到粘贴板上。
——4.遇到问题:
——4.1不能直接使用 getEementByClassName(''),一位内获取的是一个数组,应该是 getEementByClassName('')[0],一般建议使用getElementById('')
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
5 回答6.3k 阅读✓ 已解决
4 回答2.3k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
https://segmentfault.com/q/10...