vueにコピーの貼り付け機能を実装する方法

プロジェクトに貼り付けコピー機能を実装した場合、現在市場に出回っている方法は3つあり、いずれも長所と短所があり、プロジェクトの実際の状況に応じて選択できます。このセクションでは、3番目の方法に焦点を当てて、これら3つの方法について詳しく説明します。

1.プロジェクト要件図の表示：

1.サードパーティのプラグインをインストールします（非推奨）

この方法は非常に互換性があり、プロジェクトを1回だけ使用する場合はお勧めしません。

プラグインをインストールします

npm install clipboard --save
复制代码

プラグインを導入する

import Clipboard from 'clipboard';
复制代码

プロジェクトで使用

<template>
    <span class="copy" @click="onCopy">
        <i class="iconfont iconcopy"></i>
        <span>点击复制</span>
    </span>
</template>

<script>
    methods: {
        onCopy(){
             let clipboard = new Clipboard('.copy')
             clipboard.on('success', e => {
               console.log('复制成功')
               // 释放内存
               clipboard.destroy()
             })
             clipboard.on('error', e => {
               // 不支持复制
               console.log('该浏览器不支持自动复制')
               // 释放内存
               clipboard.destroy()
             })
           }
    }
</script>
复制代码

2.ブラウザにはDocument.execCommand（）コピーメソッドが付属しています（非推奨）

この方法ではプラグインをインストールする必要はありませんが、公式Webサイトには次のように記載されています。

プロジェクトで使用

<script>
    methods: {
        onCopy(){
            //创建一个input框
            const input = document.createElement("input")
            //将指定的DOM节点添加到body的末尾
            document.body.appendChild(input)
            //设置input框的value值为直播地址
            input.setAttribute("value", e)
            //选取文本域中的内容
            input.select()
            //copy的意思是拷贝当前选中内容到剪贴板
            //document.execCommand（）方法操纵可编辑内容区域的元素
            //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //删除这个节点
            document.body.removeChild(input)
    }
</script>
复制代码

3. Clipboard.writeTextメソッド（強くお勧めします）

説明する

Clipboard インターフェイスのメソッドは writeText()  、オペレーティングシステムのクリップボードに特定の文字列を書き込むことができます。1つを返しPromise ます。これは、クリップボードの内容が更新されると解析されます。発信者にクリップボードへの書き込み権限がない場合は、クリップボードへの書き込みを拒否します（拒否）

プロジェクトで使用

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('复制成功')
    })
}
复制代码

終わり...