vue实现复制网址的功能

  1. 安装插件：
  npm install clipboard --save 
  2.main.js中导入
  import Clipboard from 'clipboard';
  Vue.prototype.Clipboard = Clipboard
  3.使用：（使用的组件页面）
  <template>
   <input type="text" v-model="URL+'/'+DasData[0].tenantId.id+'?publicId='+DasData[0].assignedCustomers[0].customerId.id"  disabled>
      <i class="iconfont icon-fuzhilianjie1 tag-read"  :data-clipboard-text="URL+'/'+DasData[0].tenantId.id+'?publicId='+DasData[0].assignedCustomers[0].customerId.id" @click="copy"></i>
  </template>
  input放置客户可见的地址
  data-clipboard-text放置要复制的内容
  data(){
      return{
          URL:''
      }
  }
  methods:{
      copy() {
      var clipboard = new this.Clipboard('.tag-read');
      clipboard.on('success', e => {
        this.$message({
          type: 'success',
          message: '复制成功!'
        });
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
     // 获取当前页面的URL（根据项目需求，我这里是获取当前的url并能够复制）
    urlFun(){
      // console.log(this.$route.path)//获取当前页面的路由跳转地址/aaa
      this.URL=location.href
      console.log(location.href)//获取当前页面的完整地址http://192.168.0.0/aaa
    }
  },
   mounted(){
    this.urlFun()
  }
复制代码