vue项目中复制粘贴插件——clipboard的使用

1.安装

npm install clipboard --save

2.引用

//在需要用复制粘贴插件的vue文件中引入
<tempalte>
		<div>
			需要复制地址:<a  :href="url">{{url}}</a>
		  <span class="link" :data-clipboard-text="url" @click="copy()" style="cursor:       pointer;color:#409EFF">点击复制</span></div>
</tempalte>
<script>
import Clipboard from 'clipboard';
export default {
	     data(){
	        return{
	        url:'https://www.baidu.com'
	        }
	    },
	    methods:{
	    	copy(){
				 var clipboard = new Clipboard('.link')
		          clipboard.on('success', e => {
		                 this.$message({
		                     message:"复制成功",//这里你如果引入了elementui的提示就可以用，没有就注释即可
		                     type:"success"
		                  // 释放内存
		                 })
		                  clipboard.destroy()
		                })
                clipboard.on('error', e => {
                  // 不支持复制
                  console.log('该浏览器不支持自动复制')
                  // 释放内存
                  clipboard.destroy()
                })
			}
	    }
     }
</script>