[JavaScript知识库]vue3 移动端使用clipboard 插件实现复制功能

1、安装

npm install clipboard --save

2、页面引入

import Clipboard from 'clipboard'

3、script中使用

<script setup>
import Clipboard from 'clipboard'
import { onMounted,ref,getCurrentInstance} from "vue"
const { proxy } = getCurrentInstance()

onMounted(()=>{
    initClipboard()
})


const copy = ref(null)
const num = ref("2535263525252145")

function initClipboard() {
    const clipboard = new Clipboard(copy.value)
    clipboard.on('success', () => {
        proxy.$toast({
            message: '复制成功'
        })
    })
    clipboard.on('error', () => {
        proxy.$toast({
            message: '复制失败'
        })
    })
}

</script>

4、template中的写法

    <span class='tagName'>订单号： >{{num}}</span>
    <span class='copy' ref="copy" :data-clipboard-text="num">复制</span>

就这么愉快的解决啦！！！

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖