vue点击按钮复制内容

安装clipboard

npm install clipboard --save

引用

import Clipboard from 'clipboard'

按钮样式

<z-button size="medium" type="primary" plain icon="el-icon-document-copy"
							:disabled="!trackingNumberList.length" @click="copyNumbers">复制单号</z-button>

复制方法

copyNumbers(event: any){
		const codes:any =[]
		for (const item of this.trackingNumberList) {
			codes.push(item)
		}
		if (!codes.length) {
			return this.$message.error('复制失败,没有可替换单号')
		}
		const clipboard: any = new Clipboard(event.target, {
			text: () => codes.join('\n')
		})
		clipboard.on('success', () => {
			this.$message({ type: 'success', message: '复制成功' })
			clipboard.off('error')
			clipboard.off('success')
			clipboard.destroy()
		})
		clipboard.on('error', () => {
			this.$message({ type: 'warning', message: '复制失败!' })
			clipboard.off('error')
			clipboard.off('success')
			clipboard.destroy()
		})
		clipboard.onClick(event)
	}