1. 程式人生 > >vue開發下的clipboard.js頁面引入及使用(非模組引入)

vue開發下的clipboard.js頁面引入及使用(非模組引入)

 先引入cdn

<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
<button class="copybtn" @click="createCopy" :data-clipboard-text="describtion">
複製
</button>
/*
    :data-clipboard-text="複製的內容"
*/
//例子
....
methods:{

createCopy(){
   var clipboard = new ClipboardJS('.copybtn')  //此處為點選的dom的類名
   clipboard.on('success', e => {
       console.log('複製成功')
        // 釋放記憶體
        clipboard.destroy()
   })
   clipboard.on('error', e => {
        // 不支援複製
         console.log('該瀏覽器不支援自動複製')
        // 釋放記憶體
         clipboard.destroy()
   })                   
} 
 
}