最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况：
1.不带input输入框的原生js方法
这种情况适用于复制非输入框中的文本到剪切板
< h1 id="content" >被复制的内容< /h1 > < button id="button" >点击复制< /button > < script > (function(){ button.addEventListener('click', function(){ var copyDom = document.querySelector('#content'); //创建选中范围 var range = document.createRange(); range.selectNode(copyDom); //移除剪切板中内容 window.getSelection().removeAllRanges(); //添加新的内容到剪切板 window.getSelection().addRange(range); //复制 var successful = document.execCommand('copy'); try{ var msg = successful ? "successful" : "failed"; alert('Copy command was : ' + msg); } catch(err){ alert('Oops , unable to copy!'); } }) })() < /script >
2.带输入框的原生js方法
用于复制input，textarea中的文本
< input type="text" id="input" value="17373383" > < br > < button type="button" id="button" >复制输入框中内容< /button > < script > (function(){ button.addEventListener('click', function(){ input.select(); document.execCommand('copy'); alert('复制成功'); }) })() < /script >
这种方法也可以进行延深，充当和方法1一样的用途。动态创建一个input输入框，将其内容置为想复制的内容，最后在将其移除或者隐藏即可。
3.js复制内容到剪贴板插件（clipboard.js）
clipboard.js官网
clipboard.js CDN地址
引用方式：
NPMnpm install --save clipboard
CDN< script src="https://cdn.***bootcss.com/clipboard.js/2.0.1/clipboard.js" >< /script >
< !--默认是截取.btn中的 data-clipboard-text的属性值-- > < !-- < button class="btn" data-clipboard-text="3" >Copy< /button > -- > < !--截取input输入框中的值-- > < input id="foo" value="https://*gi*th*ub.com/zenorocha/clipboard.js.git" > < !-- Trigger -- > < button class="btn" data-clipboard-target="#foo" > < img src="assets/clippy.svg" < /button > < script src="https://cdn.***bootcss.com/clipboard.js/2.0.1/clipboard.js" >< /script > < script > var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function (e) { console.log(e); }); clipboard.on('error', function (e) { console.log(e); }); < /script >
里面还有很多高级用法,可以前往官网逻辑更多细节Clipboard官网
4. Vue框架提供的剪切板插件vue-clipboard2
import Vue from 'vue' import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // add this line Vue.use(VueClipboard)
Sample1
< div id="app" >< /div > < template id="t" > < div class="container" > < input type="text" v-model="message" > < button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError" >Copy!< /button > < /div > < /template > < script > new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { onCopy: function (e) { alert('You just copied: ' + e.text) }, onError: function (e) { alert('Failed to copy texts') } } }) < /script >
Sample2
< div id="app" >< /div > < template id="t" > < div class="container" > < input type="text" v-model="message" > < button type="button" @click="doCopy" >Copy!< /button > < /div > < /template > < script > new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Can not copy') console.log(e) }) } } }) < /script >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
注：相关教程知识阅读请移步到HTML教程频道。