复制代码到粘贴板

1,626 阅读1分钟

如何复制代码到粘贴板

复制代码到粘贴板,自己用过的三个例子,大白话。最后一个例子有个小注意点,记录一下

1.若你有固定text,div元素:

安装

npm install clipboardjs

html

<div data-clipboard-text="复制内容" >复制按钮</div>

js

new ClipboardJS('.btn');

2.如果你的要复制的是另外一个元素中的字符呢?别着急,这样就好

安装

npm install clipboardjs

html

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

js

new ClipboardJS('.btn');

3.如果说复制的内容压根不在html中呢?需要动态设置呢?

这里需要注意的点就是 data-clipboard-text="1"必须写,占位符来的~

安装

npm install clipboardjs

html

<div data-clipboard-text="1" >复制按钮</div>

js

new ClipboardJS('.copy-btn', {
        text: ()=>{
        // 动态内容,随便你取值
          return this.webIDEValue;
        }
});

中文网:www.clipboardjs.cn/