vue3,vue2使用clipboard进行复制
1.安装依赖npm install --save vue-clipboard32.使用<van-button square text="复制" type="success" class="delete-button"@click='clickBtn(value)'/>vue3<script>import { defineComponent } from '@vue/comp
·
1.安装依赖
npm install --save vue-clipboard3
2.使用
<van-button square text="复制" type="success" class="delete-button" @click='clickBtn(value)'/>
vue3
<script>
import { defineComponent } from '@vue/composition-api'
import useClipboard from 'vue-clipboard3'
export default defineComponent({
setup() {
//对原始数据进行处理,拼接成自己需要的格式
function clickBtn(value){
console.log(value)
//处理数据格式
let Msg = '编号: '+ value.Code + '\r\n' +'名称: ' + value.Name + '\r\n' + '规格: ' + value.Spec + '\r\n' + '计量单位: ' + value.UnitName
//调用复制操作函数
copy(Msg)
}
const { toClipboard } = useClipboard()
const copy = async (Msg) => {
try {
//复制
await toClipboard(Msg)
console.log(Msg)
//下面可以设置复制成功的提示框等操作
//...
} catch (e) {
//复制失败
console.error(e)
}
}
return { clickBtn }
}
})
</script>
vue2
npm install --save vue-clipboard2
其一
<template id="demo">
<div>
<p>{{message}}</p>
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '要复制的内容'
}
},
methods: {
// 复制成功
onCopy: function (e) {
console.log('成功复制: ' + e.text)
},
// 复制失败
onError: function (e) {
console.log('复制失败')
}
}
}
</script>
其二
<template id="t">
<div class="container">
<p>{{message}}</p>
<button type="button" @click="doCopy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '要复制的内容'
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
console.log('复制成功',e.text)
}, function (e) {
console.log(err)
console.log('不能复制,复制失败')
})
}
}
}
</script>
注意:
data-clipboard-text中为复制内容,class名必须与new Clipboard()中的class名相同。
阻止冒泡@click.stop无法使用clipboard进行复制,改为使用其他方法实现。
const copy = (data: string) => {
let url = data
let oInput = document.createElement('textarea')
oInput.value = url
document.body.appendChild(oInput)
oInput.select() // 选择对象;
document.execCommand('Copy') // 执行浏览器复制命令
console.log('复制成功')
oInput.remove()
}
更多推荐
所有评论(0)