vue項目如何實現剪切板功能--vue-clipboard2

1、安裝vue-clipboard2插件:

npm install --save vue-clipboard2

2、main.js添加

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3、copy組件:message綁定需要複製的文本/onCopy複製成功回調/onError複製失敗回調,在需要複製的地方調用

v-clipboard:copy="message"

  v-clipboard:success="onCopy"

  v-clipboard:error="onError"

另外補充:

原生js實現點擊按鈕,複製文本框中的的內容

<body>
    <textarea cols="20" rows="10" id="test">用戶定義的代碼區域</textarea>
    <input type="button" onClick="copyUrl2()" value="點擊複製代碼" />
</body>
<script type="text/javascript">
function copyUrl2(){
    var Url2=document.getElementById("test");
    Url2.select(); // 選擇對象
    document.execCommand("Copy"); // 執行瀏覽器複製命令
    alert("已複製好,可貼粘。");
}
</script>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章