移动端VUE点击按钮复制文本

引入clipboard.js

npm install clipboard --save

工具方法的封装

import Clipboard from 'clipboard';
import { Notify } from 'vant';
export default {
  clipboardSuccess(){
    Notify({
      type: 'success',
      message: '复制发票链接成功',
    });
  },

  clipboardError() {
    Notify({
      type: 'danger',
      message: '复制发票链接失败',
    });
  },

  handleClipboard(text, event, onSuccess, onError) {
    event = event || {};
    const clipboard = new Clipboard(event.target, {
      text: () => text,
    });
    clipboard.on('success', () => {
      onSuccess ? onSuccess() : clipboardSuccess();
      clipboard.off('error');
      clipboard.off('success');
      clipboard.destroy();
    });
    clipboard.on('error', () => {
      onError ? onError() : clipboardError();
      clipboard.off('error');
      clipboard.off('success');
      clipboard.destroy();
    });
    clipboard.onClick(event);
  },
}

VUE

<van-button @click="copy()">复制发票链接</van-button>

JS

import clipboard from '../../components/utils/clipboard';
export default {
	name: "text",
	 data() {
	     return {
	       page:{
	         pdfUrl:'http://www.textawd/static/file/text.pdf',
	       }
	     }
	 },
	methods: {
	  copy() {
	    clipboard.handleClipboard(this.page.pdfUrl, event, () => {
	      Notify({
	        type: 'success',
	        message: '复制发票链接成功',
	      });
	    }, () => {
	      Notify({
	        type: 'danger',
	        message: '复制发票链接失败',
	      });
	    })
	  }
 	}
}