vue3 모바일 단말기는 클립보드 플러그인을 사용하여 복사 기능을 구현합니다.

1. 설치

npm install clipboard --save

2. 페이지 소개

import Clipboard from 'clipboard'

3. 스크립트에서 사용

<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. 템플릿에 쓰는 방법

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

정말 행복한 해결책입니다! ! !