Clipboard.js 復制內容

插件地址

clipboard.js 中文網

安裝

npm install clipboard --save

使用示例

<template><div><div class="copyBtn" @click="copyText">復制文本</div ></div>
</template><script>
// 引入clipboard.js
import ClipboardJS from 'clipboard';export default {data() {return {textToCopy: '這是要復制的內容!', // 要復制的內容};},methods: {copyText() {// 創建新的 ClipboardJS 實例并傳入按鈕元素const clipboard = new ClipboardJS('.copyBtn', {text: () => this.textToCopy, // 動態獲取復制的文本});// 成功復制后的回調clipboard.on('success', (e) => {console.log('復制成功:', e.text);//e.clearSelection(); // 清除選中的文本});// 失敗時的回調clipboard.on('error', (e) => {console.error('復制失敗:', e);});// 復制完成后銷毀 clipboard.js 實例clipboard.on('success', () => {clipboard.destroy();});},},
};
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/93764.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/93764.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/93764.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

蛇形方陣構造

給出方陣的長寬&#xff0c;n 和 m &#xff0c;按照斜著的蛇形輸出該方陣 面試官給的送分題裸模擬&#xff0c;寫的太慢了沒過&#xff0c;實際確實慢&#xff0c;結束后起碼用了一個多小時才調完 找了下沒找到leetcode 提交的地方&#xff0c;各種oj 倒是有&#xff0c;不過是…

傳統方式部署(RuoYi-Cloud)微服務

實驗環境192.168.10.43和192.168.10.44內存不能小于4G一、安裝MySQL&#xff08;192.168.10.46&#xff09;1、安裝MySQL依賴庫dnf -y install ncurses-compat-libs2、上傳mysql-8.0.42-linux-glibc2.17-x86_64-minimal.tar.xz二進制包到/root目錄&#xff0c;解壓并移動到指定…

Linux網絡服務(一)——計算機網絡參考模型與子網劃分

文章目錄前言一、分層思想1.1 分層的基本概念1.2 點到點與端到端通信的區別二、OSI參考模型2.1 OSI七層模型的結構2.2 各層功能示例&#xff08;以QQ為例&#xff09;2.3 單工&#xff0c;半雙工和全雙工2.4 OSI七層模型總結三、TCP/IP模型3.1 TCP/IP四層與五層模型3.2 TCP/IP協…

Elasticsearch全文檢索中文分詞:IK分詞器詳解與Docker環境集成

目錄一、IK分詞器介紹與選擇1. IK分詞器詳細介紹1.1 基本概念1.2 核心功能1.3 適用場景2. 如果不使用IK分詞器&#xff0c;有哪些替代方案&#xff1f;2.1 默認分詞器的局限性2.2 替代方案及對比2.3 示例&#xff1a;Ngram Tokenizer配置3. 如何選擇分詞器&#xff1f;3.1 決策…

實用軟件推薦

作者給大家推薦兩個軟件&#xff1a;typedown,typora typedown在microsoft上即可下載&#xff0c;免費 如果有更多的需求建議下載typora,typora為付費軟件 typora官網&#xff1a;typora官網 typedown下載&#xff1a;typedown下載 作者曾經發布的一些以"md"為后…

地圖導航怎么測?

地圖導航的測試需要結合功能驗證、性能評估和場景模擬等多維度方法,以下是基于行業標準和實踐的系統化測試方案: 一、核心測試維度與方法 (一)功能測試:覆蓋導航全流程 1、基礎功能驗證 路線規劃:輸入起點 / 終點后,驗證系統是否能生成最短、最快或避開擁堵的路線,并…

力扣70:爬樓梯

力扣70:爬樓梯題目思路代碼題目 假設你正在爬樓梯。需要 n 階你才能到達樓頂。 每次你可以爬 1 或 2 個臺階。你有多少種不同的方法可以爬到樓頂呢&#xff1f; 思路 首先我們先列出來前幾個臺階的答案從第一個開始&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;5。…

CoRL 2025|隱空間擴散世界模型LaDi-WM大幅提升機器人操作策略的成功率和跨場景泛化能力

內容源自計算機科研圈在機器人操作任務中&#xff0c;預測性策略近年來在具身人工智能領域引起了廣泛關注&#xff0c;因為它能夠利用預測狀態來提升機器人的操作性能。然而&#xff0c;讓世界模型預測機器人與物體交互的精確未來狀態仍然是一個公認的挑戰&#xff0c;尤其是生…

Rust 入門 生命周期-next2 (十九)

生命周期消除實際上&#xff0c;對于編譯器來說&#xff0c;每一個引用類型都有一個生命周期&#xff0c;那么為什么我們在使用過程中&#xff0c;很多時候無需標注生命周期&#xff1f;例如&#xff1a;fn first_word(s: &str) -> &str {let bytes s.as_bytes();f…

Three.js 動畫循環學習記錄

在上一篇文章中&#xff0c;我們學習了Three.js 坐標系系統與單位理解教程&#xff1a; Three.js 坐標系系統與單位理解教程 接下來我們要學習的是Three.js 的動畫循環 一、動畫循環基礎原理 1. 什么是動畫循環&#xff1f; 動畫循環是連續更新場景狀態并重新渲染的過程&am…

ktg-mes 改造成 Saas 系統

ktg-mes 改造成 Saas 系統 快速檢驗市場&#xff0c;采用最簡單的方案&#xff0c;即添加表字段 截止2025年8月16日上傳的ktg-mes搭建存在一些問題&#xff0c;搭建可看文章&#xff1a; 搭建ktg-mes 改造 1. 添加租戶表 create table sys_tenant (tenant_id bigint au…

【新手易混】find 命令中 -perm 選項的知識點

find 命令是 Linux/Unix 系統中強大的文件查找工具&#xff0c;廣泛用于根據文件名、類型、時間、權限等條件搜索文件。其中&#xff0c;-perm 選項用于按文件權限查找文件&#xff0c;而在 -perm /mode 中出現的斜杠 / 是一種特殊的語法&#xff0c;表示“按位或&#xff08;O…

gdb的load命令和傳給opeocd的monitor flash write_image erase命令的區別

問&#xff1a; "monitor flash write_image erase ${workspaceFolder}/obj/ylad_led_blink.elf", 和 "load", "executable" : "${workspaceFolder}/obj/ylad_led_blink.elf", 的區別&#xff1f;答&#xff1a; 你提到的 "monit…

1. Docker的介紹和安裝

文章目錄1. Docker介紹核心概念核心優勢與虛擬機的區別一句話總結2. Docker的安裝Windows 10/11 安裝 Docker Desktop&#xff08;推薦 WSL2 方式&#xff09;Linux&#xff08;以 Ubuntu / Debian 系為例&#xff09;Docker 是一個開源的容器化平臺&#xff0c;它允許開發者將…

fastdds.ignore_local_endpoints 屬性

Fast DDS 的 fastdds.ignore_local_endpoints 屬性用于控制同一 DomainParticipant 下的本地端點&#xff08;即 DataWriter 和 DataReader&#xff09;是否自動匹配。以下是對該功能的詳細解釋&#xff0c;并翻譯為中文&#xff0c;結合其上下文、實現原理和使用場景&#xff…

華清遠見25072班C語言學習day11

重點內容:函數&#xff1a;定義&#xff1a;返回值類型 函數名(參數列表) { //函數體 }函數的參數列表中可以有多個數據返回值&#xff1a;如果函數沒有返回值可以寫成void 返回值的作用&#xff0c;函數的結果用來返回給主調函數的&#xff0c;如果主調函數處不需要函數的結果…

視覺語言導航(7)——VLN的數據集和評估方法 3.2

這是課上做的筆記&#xff0c;因此很多記得比較急&#xff0c;之后會逐步完善&#xff0c;每節課的邏輯流程寫在大綱部分。成功率(SR)導航誤差(NE)成功加權路徑長度&#xff08;SucceedPLength&#xff09;軌跡長度&#xff08;TL&#xff09;先知成功率&#xff08;OS&#xf…

ElasticSearch不同環境同步索引數據

目的&#xff1a;在生產環境把一個索引的數據同步到測試環境中1、在生產環境導出json數據curl -u "adims_user:xkR%cHwR5I9g" -X GET "http://172.18.251.132:9200/unify_info_mb_sp_aggregatetb_0004/_search?scroll1m" -H Content-Type: applicatio…

咨詢進階——解讀咨詢顧問技能模型

適應人群為咨詢行業從業者、咨詢團隊管理者、想提升咨詢技能的職場人士及咨詢公司培訓人員。主要內容圍繞咨詢顧問技能模型展開,核心包括五大核心能力(解決問題能力,涵蓋洞察力、分析技巧、問題構建等,從識別問題實質到構建新分析方法分層次闡述;管理能力,涉及管理他人與…

2025年- H98-Lc206--51.N皇后(回溯)--Java版

1.題目描述2.思路 二維數組集合 (1&#xff09;N皇后規則 1&#xff09;不能同行&#xff08;同一行不能出現2個皇后&#xff09; 2&#xff09;不能同列&#xff08;同一列不能出現2個皇后&#xff09; 3&#xff09;不能說45度或135度&#xff08;斜對角線不能出現2個皇后&am…