需求背景：
箭頭所指的是復制當前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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297311.html
標籤：其他