石家庄老站长

点击联系客服
客服QQ: 客服微信:
 找回密码
 立即注册
查看: 67|回复: 0

elementui根据id复制URL 可以通过URL直接访问目标地�

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-9-9 08:16:01 | 显示全部楼层 |阅读模式
需求背景:

箭头是指复制当前ID的URL。您可以在地址栏中输入此URL,直接访问此弹出窗口。如果我发现这个弹出窗口有问题,就不用别人再打开这个ID,点击弹出窗口了。直接复制此URL并转发给其他人,其他人可以直接访问

复制Url





在地址栏中输入以下内容





模板





Template  slot-scope='scope  '

斯帕因

El-button  type=' text  ' @ click=' all  info(scope  . row  . id)
tion">" >{{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
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|石家庄@IT精英团

GMT+8, 2022-8-13 21:06 , Processed in 0.184184 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2021 Comsenz Inc.

快速回复 返回顶部 返回列表