原理:通过slot 设置显示一个复制的图标如图 ,给这个图标添加一个点击事件,通过这个时间调用浏览器的方法,完成复制的功能
步骤如下:
1.先封装复制方法
备注:这里的方法封装在了promise里面 设置了返回数据,可以不这样写,直接写普通的方法
export const copy = (data) => {
return new Promise((resolve, reject) => {
const url = data
const oInput = document.createElement('input')
oInput.value = url
document.body.appendChild(oInput)
oInput.select() // 选择对象;
document.execCommand('Copy') // 执行浏览器复制命令
// this.$message.success('已复制!')
oInput.remove()
resolve(`复制成功:${data}`)
})
}
2.在main.js里面将方法挂载在vue原型上,方便后期其他地方的使用
import { copy } from '@/components/allcom/resizable' // table表格宽度拖拽
Vue.prototype.