Use of clipboard in vue

Introduction

Used on the pageclipboardYou can copy and paste it,clipboardCan directly write content to the clipboard

Install

npm install --save clipboard

Method 1

& Lt; Template & gt; & lt; span & gt ;{{ code }}& lt;/span & gt; & lt; I class = "El-icon-document" Title = "click to copy" @ click = "copyactivecode ($ event, code)"/& gt; & lt;/template & gt; // methodscopyactivecode (E, text) {const clipboard = new clipboard(e.tar get, {text: () = & gt; text}) clipboard. on ('success', E = & gt; {This. $ message ({type: 'success', message: 'copied successfully'}) // release the memory clipboard. off ('error') clipboard. off ('success') clipboard. destroy ()}) clipboard. on ('error', E = & gt; {// copying this. $ message ({type: 'waning', message: 'This browser does not support automatic copying'}) // release the memory clipboard. off ('error') clipboard. off ('success') clipboard. destroy ()}) clipboard. onclick (e )}

Method 2

& Lt; Template & gt; & lt; span & gt ;{{ code }}& lt;/span & gt; & lt; I id = "tag-Copy" & lt; -- use the class as the selector identifier -- & gt;: Data-clipboard-TEXT = "code" & lt; -- content to be copied -- & gt; Class = "El-icon-document" Title = "click to copy" @ click = "copyactivecode ($ event, code) "/& gt; & lt;/template & gt; // methodscopyactivecode () {const clipboard = new clipboard (" # tag-Copy ") clipboard. on ('success', E = & gt; {This. $ message ({type: 'success', message: 'copied successfully'}) // release the memory clipboard. destroy ()}) clipboard. on ('error', E = & gt; {// copying this. $ message ({type: 'waning', message: 'This browser does not support automatic copying'}) // release the memory clipboard. destroy ()})}

Original article address: 1190000016726633

Use of clipboard in vue