Wie füge ich eine Schaltfläche zum Kopieren des angezeigten Texts in vue.js hinzu?

Question

Ich versuche, eine Schaltfläche hinzuzufügen, mit der ich einen Codeausschnitt aus einer Ansicht in die Zwischenablage meiner Codekataloganwendung in vue.js kopieren kann.

Wenn ich die Vue-Zwischenablagebibliothek verwende und versuche, dies in der Beispielkomponente zu tun:

<div class="full-screen-code-snippet">
  {{ example.codeSnippet }}
</div>

<div class="full-screen-copy-button">
<button v-clipboard:copy="example.codeSnippet"></button>    
</div>

Der Codeausschnitt wird gut angezeigt, die Schaltfläche jedoch nicht. Wie läuft das? Wie soll ich diesen Knopf machen?

Answer 1

您应该像这样使用它： v-clipboard="variableName" 或与 :copy 相同。 您可以在此处或这个