国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iclipboard: 一個更好用的復(fù)制文本到剪貼板的 npm 包

AlienZHOU / 2050人閱讀

摘要：最近開發(fā)遇到一個需求要把一串文字復(fù)制到剪貼板然后就看了下發(fā)現(xiàn)了一個多的庫想都沒想就拉來用了結(jié)果發(fā)現(xiàn)這貨真特么不是一般的難用特別是和或者綁定的時候簡直不想吐槽所以造了個用起來更舒服并且體積更小沒有依賴的庫來節(jié)省時間這個庫的名字叫你可以在上找到

最近開發(fā)遇到一個需求, 要把一串文字復(fù)制到剪貼板, 然后就看了下 github, 發(fā)現(xiàn)了一個 star 2W 多的庫 clipboard, 想都沒想就拉來用了, 結(jié)果發(fā)現(xiàn)這貨真特么不是一般的難用, 特別是和 react 或者 vue 綁定的時候, 簡直不想吐槽.

所以造了個用起來更舒服, 并且體積更小, 沒有依賴的庫來節(jié)省時間.

這個庫的名字叫 iclipboard.

你可以在 npm 上找到它: http://npmjs.com/package/icli....

或者在 GitHub 上查看源代碼: https://github.com/acrazing/i....

使用教程

安裝: npm 或者 yarn 都可以

npm install -S iclipboard
yarn add iclipboard

使用: 這個庫只提供了一個接口: copy(text): boolean, 使用的時候只需要調(diào)用這個函數(shù)就 ok:

import { copy } from "iclipboard"

copy("你想要的字符串")

但是需要注意: 復(fù)制粘貼操作瀏覽器限定只能是在用戶交互的時候發(fā)生, 因此一定是在某個元素的click或者其它事件回調(diào)中同步調(diào)用, 所以完整的代碼看起來大概長成這樣子:

import { copy } from "iclipboard"

const button = document.getElementById("button-id")
button.addEventListener("click", () => {
    if(copy("Hello world!")) {
        alert("復(fù)制成功")
    } else {
        alert("復(fù)制失敗")
    }
})

在 React 中調(diào)用也是一樣:

import React from "react"
import { copy } from "iclipboard"

class App extends React.Component {
    handleClick = () => {
        if(copy("Hello world!")) {
            alert("復(fù)制成功")
        } else {
            alert("復(fù)制失敗")
        }
    }
    
    render() {
        return 
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98939.html

相關(guān)文章

  • [譯] 復(fù)制文本到剪切板的clipboard.js使用方法

    摘要：為什么復(fù)制文本到剪貼板應(yīng)該不難。在內(nèi)部我們需要獲取所有匹配的元素選擇器并且為它們每一個添加上事件偵聽器。因為這個原因我們使用事件代理通過一個偵聽器取代了多個事件監(jiān)聽器。從另一個元素復(fù)制文本常見的用例是復(fù)制另一個元素的內(nèi)容。 工作中需要使用到的一個復(fù)制插件，使用簡單兼容性還行，因為沒找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問題歡迎指正！！為了更加直觀的展示用法,略...

    itvincent 評論0 收藏0

  • 移動端復(fù)制文本clipboard 以及針對iOS的處理

    摘要：如果有這樣的需求點擊一個按鈕，復(fù)制某個文本的文字到剪貼板以供使用，我們就需要用到一些方法。在上我們復(fù)制文本可以使用但是在移動端是不行的。我選用的方案是，實測效果完美。地址我以舉例這是我們想要復(fù)制的文字復(fù)制文案復(fù)制成功復(fù)制失敗 如果有這樣的需求：點擊一個按鈕，復(fù)制某個文本的文字到剪貼板以供使用，我們就需要用到一些方法。在pc上我們復(fù)制文本可以使用 document.execCommand...

    cppprimer 評論0 收藏0

  • DOM中剪貼板控制與剪貼板劫持攻擊提醒

    摘要：直到的到來，將剪貼板相關(guān)事件納入了規(guī)范。但是，在和中，只有在處理剪貼板事件期間，對象才有效，這是為了防止對剪貼板的未授權(quán)訪問在中，則可以隨時訪問對象。 本部分系列文章Github Repo Introduction Clipboard API HTML5實戰(zhàn)與剖析之剪貼板事件 showImg(https://segmentfault.com/img/remote/14600000067...

    lemanli 評論0 收藏0

  • Web聊天工具的富文本輸入框

    摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數(shù)據(jù)即可，其一是普通的文本類型數(shù)據(jù)，包括表情其二則是圖片類型數(shù)據(jù)。 最近折騰 Websocket，打算開發(fā)一個聊天室應(yīng)用練練手。在應(yīng)用開發(fā)的過程中發(fā)現(xiàn)可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊(yùn)含著許多有趣的知識，于是便打算記錄下來和大家分享。 倉庫地址：chat-input-box預(yù)覽地址：https://codepen.io...

    iKcamp 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<