欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用Clipboard.JS在h5頁面中復(fù)制內(nèi)容實例詳解

 更新時間:2019年09月03日 16:02:43   作者:手指樂  
在本篇文章里小編給大家整理了關(guān)于Vue使用Clipboard.JS在h5頁面中復(fù)制內(nèi)容以及相關(guān)知識點內(nèi)容,需要的朋友們可以學(xué)習(xí)下。

安裝clipboard.js

github路徑:https://github.com/zenorocha/clipboard.js

安裝:

npm install clipboard --save

引入clipboard.js

import ClipboardJS from "clipboard";

<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

使用:

剪切

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>dfsf</title>

  <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function() {
      new ClipboardJS('.btn');
    })
  </script>
</head>

<body>
  <div>
    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>

    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

  </div>

</body>

</html>

復(fù)制

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">

3.在vue中使用并自定義復(fù)制內(nèi)容,定義復(fù)制回調(diào):

<div class="dlbtn cpkw" @click="copykeyword">復(fù)制關(guān)鍵詞</div>

·····
copykeyword() {
   var clipboard = new ClipboardJS(".cpkw", {
    text: function(trigger) {
     //alert("ok");
     return "testvalue";
    }
   });
   clipboard.on("success", e => {
    //復(fù)制成功
    // 釋放內(nèi)存
    clipboard.destroy();
   });
   clipboard.on("error", e => {
    // 不支持復(fù)制
     console.log("該瀏覽器不支持自動復(fù)制");
    // 釋放內(nèi)存
    clipboard.destroy();
   });

以上就是本次介紹的全部知識點內(nèi)容,感謝大家對腳本之家的支持。

相關(guān)文章

  • vue?@scroll監(jiān)聽滾動條事件方式

    vue?@scroll監(jiān)聽滾動條事件方式

    這篇文章主要介紹了vue?@scroll監(jiān)聽滾動條事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 解決vue-router 切換tab標(biāo)簽關(guān)閉時緩存問題

    解決vue-router 切換tab標(biāo)簽關(guān)閉時緩存問題

    這篇文章主要介紹了解決vue-router 切換tab標(biāo)簽關(guān)閉時緩存問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue-Router進階之滾動行為詳解

    Vue-Router進階之滾動行為詳解

    本篇文章主要介紹了Vue-Router進階之滾動行為詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 如何讓別人訪問本地運行的vue項目

    如何讓別人訪問本地運行的vue項目

    這篇文章主要介紹了如何讓別人訪問本地運行的vue項目,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)

    Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)

    這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • vue .js綁定checkbox并獲取、改變選中狀態(tài)的實例

    vue .js綁定checkbox并獲取、改變選中狀態(tài)的實例

    今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 淺談實現(xiàn)在線預(yù)覽PDF的幾種解決辦法

    淺談實現(xiàn)在線預(yù)覽PDF的幾種解決辦法

    這篇文章主要介紹了淺談實現(xiàn)在線預(yù)覽PDF的幾種解決辦法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue proxyTable的跨域中pathRewrite配置方式

    vue proxyTable的跨域中pathRewrite配置方式

    這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-create創(chuàng)建VUE3項目詳細圖文教程

    vue-create創(chuàng)建VUE3項目詳細圖文教程

    create-vue是Vue官方新的腳手架工具,底層切換到了vite(下一代前端工具鏈),為開發(fā)提供極速響應(yīng),下面這篇文章主要給大家介紹了關(guān)于vue-create創(chuàng)建VUE3項目的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • 詳解Vue源碼學(xué)習(xí)之雙向綁定

    詳解Vue源碼學(xué)習(xí)之雙向綁定

    這篇文章主要介紹了Vue源碼學(xué)習(xí)之雙向綁定,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論