JS实现复制剪贴板
这种实现复制方式在服务器上可以实现复制(http),无需https
而navigator.clipboard方式实现的复制只能在https和本地localhost实现复制,在服务器上会undefined,这是浏览器的安全策略导致的。
node环境安装依赖
npm install clipboard --save
<input id="input" value="复制文本">
<!--可以看到,在 <button> 标签中添加了一个 data-clipboard-target 属性,它的值是需要复制的 <input> 内容的 id。-->
<button class="btn" data-clipboard-target="#input">点我复制</button>
import ClipboardJS from 'clipboard';
mounted() {// 在组件挂载完成后初始化ClipboardJSthis.initClipboard();},
methods:{initClipboard(){//事件绑定:.btn类选择器,复制成功触发success//new ClipboardJS取决于你import ClipboardJS 的变量名var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);});}}}
如果是复制span标签内容,则上面的复制不可用
需要用data-clipboard-text
node环境安装依赖
npm install clipboard --save
<span class="btnclip":data-clipboard-text="item.message">{{ item.message }} </span>
import ClipboardJS from 'clipboard';
mounted () {this.initClipboard();},methods: {initClipboard(){var that = this;var clipboard = new ClipboardJS('.btnclip');clipboard.on('success', function(e) {that.$message({ message: '复制成功', type: 'success' });e.clearSelection();});clipboard.on('error', function(e) {that.$message.error('复制失败', e);console.log("Action:",e.action);console.log("Trigger:",e.trigger);});},