当前位置:网站首页>Say goodbye to flash and bloated framework! This 30000 star open source tool helps you improve your efficiency

Say goodbye to flash and bloated framework! This 30000 star open source tool helps you improve your efficiency

2021-01-24 11:53:39 Open source outpost

clipboard.js For clipboard copy ,gzip Compressed version only 3kb.

Why choose clipboard.js

Copying text to the clipboard shouldn't be complicated , It shouldn't take dozens of steps to configure or hundreds of KB To load the , We should not rely on Flash Or other bloated frameworks .

clipboard.js Get rid of these restrictions , It can realize convenient and light operation .

install

npm install :

npm install clipboard --save

Or download the compressed package file :https://github.com/zenorocha/...

To configure

If it has passed npm install , directly import:

import ClipboardJS from "clipboard";

If not used npm management , Need to pass through script Introduce or pass through The third party CDN load .

<script src="dist/clipboard.min.js"></script>

And then by passing in DOM Selectors or HTML Elements or HTML Array of elements establish Clipboard example .

new ClipboardJS('.btn');

In general , For all elements that meet the criteria, you need to add listening Events , But if there are more qualified elements , This consumes a lot of memory .
therefore ,clipboard.js Used Event agent , Replace all the monitors with one , This ensures the maximum performance .

Use

Copy content from other elements

If you need to copy content from other elements , You can do this by adding data-clipboard-target attribute , The property value is a selector , Select the copied element .

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Cut and paste content from other elements

Add... To the trigger element data-clipboard-action attribute , Property value can be copy perhaps cut, Set to cut You can cut and paste the content , The default is copy.

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

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>
Be careful : cut Only in <input> or <textarea> Element .

Copy content from properties

If you don't need to copy content from other elements , Then you can add... To the trigger element data-clipboard-text attribute , The property value is the content to be copied .

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

Event handling

If you need to perform other custom operations after copying , You can add success or error event .

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Example show : Get into Official website , open console that will do .

Tooltips

Because every application has a different design , therefore clipboard.js No built-in css Of tooltip Solution .

If you need to implement tooltip effect , You can refer to the official website to achieve similar effects , The website uses GitHub's Primer style .

Advanced options

If you don't want to change it HTML
Code , You can also use API To achieve the above effect , Just declare the function in the instance , Returns the desired value .

for example , If you need dynamic settings target, I can return one Node node .

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

If you need dynamic settings text, I can return one String .

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

If in Bootstrap Modal frame (Modals) Use in , Or it can be used in other class libraries that modify the focus , You can set the element that gets the focus to container The value of the property .

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

similarly , Single page application , If more precise management is needed DOM Life cycle of , You can clean up events and create objects .

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

Vue3 Try to use clipboard.js

Create a new one Vue3 project , install clipboard.js

//  newly build  vue  project 
vue create clipboard

//  install 
yarn add clipboard

Simple use of clip and paste function

modify App.vue, introduce ClipboardJS, Delete other elements , Add test elements

<!-- App.vue -->
<template>
  <div class="wrapper">
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

    <button
      class="btn"
      data-clipboard-target="#foo"
      data-clipboard-action="cut"
    >
      Copy to clipboard
    </button>
  </div>
</template>

stay Vue3 setup Function clipboard example

//  introduce 
import ClipboardJS from "clipboard";

// setup  Instantiation in function 
setup() {
  new ClipboardJS(".btn");
},

You can see that click the button to cut and paste successfully !

add to success function

When the clip is successful , The clip success message will pop up , Modify the above example a little ,input The content in is bi-directional binding :

<template>
  <div class="wrapper">
    <input id="foo" :value="content" />

    <button
      class="btn"
      data-clipboard-target="#foo"
      data-clipboard-action="cut"
    >
      Copy to clipboard
    </button>
  </div>
</template>

// setup  function 
  setup() {
    const clipboard = new ClipboardJS(".btn");
    const content = ref("clipboard  Test content ");
    clipboard.on("success", (e) => {
      alert(` Cut and paste successfully : ${e.text}`);
      console.info("Action:", e.action);
      console.info("Text:", e.text);
      console.info("Trigger:", e.trigger);
      e.clearSelection();
    });
    return { content };
  }

The popup is as follows :

alert

Print as follows :

console

Browser support

Open source outpost Everyday sharing is hot 、 Interesting and practical open source projects . Participate in maintenance 10 ten thousand + Star Open source technology repository for , Include :Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET etc. .

版权声明
本文为[Open source outpost]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/01/20210124115156717R.html

随机推荐