elementui 根据id复制url,通过url可直接访问目标地址

需求背景：
箭头所指的是复制当前ID的url,拿到这个url在地址栏输入可以直接访问到这个弹窗，如果说我发现这弹窗里面存在某个问题，不需要其他人再打开网页找到这个ID点再击弹出弹窗，直接复制这个url转发给其他人，其他人可直接点击访问

复制url

在地址栏输入

弹框

<template slot-scope="scope">
          <span>
              <el-button type="text" @click="allInfo(scope.row.id)" >{{scope.row.id}}</el-button>  //获取当前行id
              <el-button type="text"  icon="el-icon-paperclip" size='mini' @click="copyUrl(scope.row)"  title="Copy Url"></el-button>   //复制url按钮
            </span>     
         </template>

<script>
export default {
  data() {
    return {
	ticketid:window.location.href,  //获取当前输入框的地址

}
}
mounted() {
	//在页面未加载完前调用，不然会显示为空(在地址栏输入复制的url会访问到这里，再调用弹窗的allinfo方法就可以弹出弹窗，因为allinfo里面设置了弹窗的属性dialogVisible=true)
	let tick_id = (this.ticketid.split('=')[1])*1  //对当前输入框的地址以等号分割拿到id
    if(tick_id){
      this.allInfo(tick_id)     //把拿到的id传入到allinfo （allinfo是触发弹框的按钮）
    }
}
methods: {
	copyUrl(row){
        let copy_url = window.location.origin+'/support-vue/ticket/?ticketid='+row.id
        //创建input标签
        var input = document.createElement('input')
        //将input的值设置为需要复制的内容
        input.value = copy_url
        //添加input标签
        document.body.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand('copy')
        //成功提示信息
        this.$message.success('success!')
        //移除input标签
        document.body.removeChild(input)
      },

}
}
</script>

拓展：
Vue实现复制功能
不使用插件可以使用input标签，然后通过execCommand(‘copy’)函数实现复制功能。

复制input标签中的内容

<template>
  <div id="app">
    请输入你需要复制的内容：<input id="copy" v-model="mes"/>
   <button v-on:click="copy()">复制</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      mes: ''
    }
  },
  methods: {
    copy () {
      //获取input对象
      var input = document.getElementById('copy')
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      this.$message.success('success!')
    },
  },
}
</script>

复制不是标签中的内容

<template>
  <div id="app">
   <button id="copy" v-on:click="copy()">复制</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      mes: '这就是需要复制的内容！'
    }
  },
  methods: {
    copy () {
      //创建input标签
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = this.mes;
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('success!')
      //移除input标签
      document.body.removeChild(input)
    },
  },
}
</script>

这两个拓展方法引用自
https://blog.csdn.net/weixin_43857345/article/details/107913989