0
点赞
收藏
分享

微信扫一扫

浏览器复制文本内容到浏览器,clipboard插件解决线上的兼容性


本地

这样在本地跑一般是没有问题的

copy(){
try {
navigator.clipboard.writeText("我爱你").then(()=>{
this.$message({type:"success",message:"已经复制到粘切板",center:true})
},()=>{
this.$message({type:"error",message:"请使用高版本浏览器,才能执行粘切操作",center:true})
})
} catch (error) {
this.$message({type:"error",message:error,center:true})
}
}

线上

线上环境这一段代码就会报错;
​​​Cannot read properties of undefined (reading 'writeText')​

可以使用插件:clipboar
​​​yarn add clipboar​​​​import Clipboard from 'clipboard'​​ 在vue中这样使用一下:

有数据源为:
fromtData = '我\n爱\n你'

使用之前,将需要的数据绑定到这个组件上面

<el-button type="success" @click="copy" class="report-import-button" :data-clipboard-text='fromtData'>将内容赋值到粘切板</el-button>

使用ing
import Clipboard from 'clipboard'
//绑定数据来源,创建实例挂载到某个dom上面
const myClip = new Clipboard('.report-import-button')
//copy到粘切板
copy(){

myClip.on('success', (e: any) => {
this.$message({type:"success",message:"已经复制到粘切板",center:true})
myClip.destroy()
e.clearSelection()
})
myClip.on('error', () => {
this.$message({type:"error",message:"请使用高版本浏览器,才能执行粘切操作",center:true})
})
}


举报

相关推荐

0 条评论