vue復制地址欄鏈接：clipboard

1.安裝插件

cnpm install clipboard --save

2.所需頁面中引入插件

import Clipboard from 'clipboard';

3.按鈕

<div class="copy flexCenter" @click="copyUrl" :data-clipboard-text="url"><img src="../../assets/image/icon_link.png" style="margin-right: 10px;"/>復制本文鏈接</div>

4.data中定義url，並在created中賦值

 

 

4.methods

methods:{
//  復制本文鏈接
        copyUrl(){
          let _this = this;
          let clipboard = new Clipboard(".copy"); // 這里括號里填寫上面點擊事件綁定的class名
          clipboard.on("success", e => {
            // console.log('aaaaa',e.text)
            _this.$message.success("復制成功")
            // 釋放內存
            clipboard.destroy();
          });
          clipboard.on("error", e => {
            // 不支持復制，提示根據自己項目實際使用的UI來寫
            _this.$message.error("該瀏覽器不支持自動復制")
            // 釋放內存
            clipboard.destroy();
          });

        }

}