<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react 怎么實現拷貝功能

          來源:php中文網 | 2022-12-30 12:02:27 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

          react 怎么實現拷貝功能?

          React中實現一鍵復制——五種辦法


          (資料圖片)

          copy-to-clipboard庫(推薦)react-copy-to-clipboard庫(推薦)navigator.clipboard.writeText(e)(推薦)document.execcommand(“copy”)copy-js庫

          copy-to-clipboard

          1、安裝方式

          // npm安裝---這種方式可能會對babel的版本有限制npm i --save copy-to-clipboard//cdn引入<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

          2、使用方式

          import copy from "copy-to-clipboard";const handleClick = ()=>{copy("復制的內容");message.success("復制成功")}<Button onClick={handleClick}>復制</Button>

          react-copy-to-clipboard

          該方法是基于copy-to-clipboard的,如果在安裝copy-to-clipboard的時候,發現和其他部分npm包有版本限制的話,那估計這個也不行,但是也不是不可以試試 1、安裝

          npm i --save react-copy-to-clipboard

          2、用法——這里有個地方要注意,在<CopyToClipboard></CopyToClipboard>中,只能有一個根元素,并且本人親試,如果在<CopyToClipboard></CopyToClipboard>中,一個根元素裹著兩個兄弟節點比如div和一個button的話,復制也不會生效,我也不知道為啥,有興趣的小伙伴可以去看看源碼。

          import { CopyToClipboard } from "react-copy-to-clipboard"; <CopyToClipboard text={"復制的內容"}   onCopy={(_, result) => {     if (result) {       message.success("復制成功");     } else {       message.error("復制失敗,請稍后再試");     }   }} >   <Button     type="primary"     icon={<CopyOutlined />}   /> </CopyToClipboard>

          document.execcommand(“copy”)——已被棄用

          不過好似有的瀏覽器還可以使用,具體看文檔點我 這個方法我沒有使用過,有什么坑我也不清楚。

          使用方法

          <button id="btn"  style="margin-top: 40px;">一鍵復制</button>const btn = document.querySelector("#btn");  btn.addEventListener("click", () => {      const textarea= document.createElement("textarea");      textarea.setAttribute("readonly", "readonly");      textarea.value = "xxxxx";      document.body.appendChild(textarea);      textarea.select();      if (document.execCommand("copy")) {          document.execCommand("copy");          alert("復制成功");      }      document.body.removeChild(textarea);  })

          copy-js庫

          這塊我只是找到了這個庫,也沒有使用過,但是我看源碼底層也是使用的document.execcommand("copy")1、安裝

          // npm包下載npm install copy-js --save// CDN導入<script src="http://cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>

          2、使用

          import copy from "copy-to-clipboard";copy("hello world", function(err) {    if (err) console.log("Some thing went wrong!");     console.log("Copied!");});

          navigator.clipboard.writeText(e)

          這個方法也有踩坑的地方,開發時間比較短,也沒有具體去研究原因 這個方法的參數e,是需要拿到input文本框的value值為復制的節點

          但是這個方法可能在一些應用里邊的端內瀏覽器會有限制,在正常瀏覽器里是可以使用的,但是比如說現在在飛書端內瀏覽器里邊是沒有clipboard這個對象的。還是得看場景使用。

          1、使用方法

          const { Search } = Input;const copyLink = (e: any) => {  navigator.clipboard.writeText(e).then(    () => {      message.success(intl.t("復制成功"));      console.log(e);    },    () => {      message.error(intl.t("復制失敗,請稍后再試"));    },  );}; <Search   bordered={false}   value={window.location.href}   enterButton={intl.t("復制鏈接")}   size="middle"   onSearch={copyLink} />

          可能還有其他一些方法,暫時沒有想到的

          推薦學習:《react視頻教程》

          以上就是react 怎么實現拷貝功能的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>