微信h5复制到剪贴板

前言

这是一个很简单的功能，换了solidjs框架后，在微信浏览器中复制失败，此处记录一下插件用法。

ts版本插件

clipboard

安装：

npm install clipboard --save

用法：

import ClipboardJS from 'clipboard/dist/clipboard.min.js'
<!-- Trigger -->
<button
  class="btn"
  data-clipboard-text="123123123123123"
>
  Copy to clipboard
</button>

动态参数：

import ClipboardJS from 'clipboard/dist/clipboard.min.js'
new ClipboardJS('.btn', {
  text: function () {
    return '123123123123123'
  },
});
<button
  class="btn"
>
  Copy to clipboard
</button>

react版本插件

react-clipboard.js

安装：

npm i --save react-clipboard.js

用法：

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Clipboard from 'react-clipboard.js'; 

class MyView extends Component {
  render() {
    return (
      <Clipboard data-clipboard-text="I'll be copied">
        copy to clipboard
      </Clipboard>
    );
  }
}

 ReactDOM.render(<MyView/>, document.getElementById('app'));