一句代碼搞定瀏覽器複製文本和兼容性問題【複製粘貼js庫】

文本複製在前端可以說是一個比較常用的功能，但是官方的API和一些現有的庫不易使用，而且使用複雜，兼容性也可能會有問題。

於是本人封裝了一個自己經常用到的文本複製方法，整理成一個庫： copy-util，使用起來十分簡單，一句代碼搞定複製文本，也支持綁定DOM元素使用，使可以0代碼完成複製功能

以下是官方文檔，歡迎使用

🚀 簡單易用、體積小巧的 web 複製文本 js 庫

0.快速使用

使用 npm 安裝：

npm i copy-util

import Copy from 'copy-util';
Copy('Copy something'); // 一句代碼搞定複製文本

使用 script 標籤使用：

<script src="https://cdn.jsdelivr.net/gh/theajack/copy/cdn/copyutil.latest.min.js"></script>
<!--
或通過版本號引用
<script src="https://cdn.jsdelivr.net/gh/theajack/copy/cdn/copyutil.{version}.min.js"></script>
-->
<script>
    Copy('Copy something');
</script>

1. 功能

一句代碼搞定瀏覽器端複製文本
體積僅 1.41 kb
支持結合 dom 使用，無需編寫 js 代碼
兼容性良好，支持主流瀏覽器
typescript 支持

2. API

2.1. Copy(string)

copy-util 僅用一行代碼就可以搞定 web 端文本複製

該方法返回一個布爾類型，表示複製是否成功:

import Copy from 'copy-util';
var isSuccess = Copy('Copy something'); // 一句代碼搞定複製文本
// 該方法返回一個布爾類型，表示複製是否成功

2.2. Copy(object)

您可以使用配置來綁定需要複製的 dom 元素和需要複製的內容類型:

<input id="inputEl" />
<span id="spanEl">some text</span>

import Copy from 'copy-util';

Copy({
    el: '#inputEl' // 使用選擇器, 如果有多個dom只會取用第一個
});

Copy({
    el: document.getElementById('spanEl'), // 使用dom元素
    type: 'text' // 指定複製的類型
});

參數:

el: el 可以是選擇器或者一個 dom 元素

type: type 表示要複製的類型，可選值有 value, text, html, src, href。默認值爲 value

2.3. DOM 綁定

除了使用 api 方式調用copy-util之外，還可以綁定 DOM 使用，這樣就可以無需編寫 js 代碼：

<input id="inputEl" />
<!--從某個dom元素複製內容-->
<button copy-el="#inputEl" copy-type="value">Copy from dom</button>
<!--直接複製文本-->
<button copy-text="some text">Copy text</button>

屬性：

copy-el：與 2.2 中的參數 el 同樣的含義

copy-type： 2.2 中的參數 type 同樣的含義

copy-text：需要複製的文本，支持動態修改

2.4. Copy.init()

2.3 中綁定 DOM 默認會在 DOM 加載完成之後初始化相關元素和事件，但是在某些場景下（比如 vue 組件或是動態插入的 dom）會不起作用，此時只需要在 dom 加載完成之後手動調用 Copy.init() 即可完成初始化

一句代碼搞定瀏覽器複製文本和兼容性問題【複製粘貼js庫】