How to add copy to clipboard functionality in vuejs with prismjs?

问题

I am displaying Html syntax using vue-prism-component (https://www.npmjs.com/package/vue-prism-component). Now I want to add a button that should copy the code. So far, I have found a library vue-clipboard2 (https://www.npmjs.com/package/vue-clipboard2) in this they are getting text from an input tag. How I would select the syntax of Html generated by vue-prism-component on a click of button.

回答1:

Prism has some documentation for implementing such feature

https://prismjs.com/plugins/copy-to-clipboard/

Here is the example code for copying code from vue-prism-component

[Codepen] https://codepen.io/wilbo/pen/xRVLOj

You need to add this dependency of clipboard https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js

another codepen example which is not in vue but just to get idea

[Codepen] https://codepen.io/drhodes/pen/NAOgpG

来源：https://stackoverflow.com/questions/58092562/how-to-add-copy-to-clipboard-functionality-in-vuejs-with-prismjs