React使用Clipboard插件

背景

发布链接提供一个复制按钮，提供给用户快速复制，故定义了一个组件使用到复制功能。（插曲：使用navigator.clipboard.writeText复制只支持localhost和https下…）

功能实现

import { CopyOutlined, LinkOutlined } from '@ant-design/icons';
import { Button, Input, message, Space, Switch, Tooltip } from 'antd';
import Clipboard from 'clipboard';
import React, { useEffect, useState } from 'react';
import styles from './Publish.less';

const PublishLink: React.FC<{ link: string; uuid: string }> = ({ link, uuid }) => {
  useEffect(() => {
    const clipboard = new Clipboard(`#${uuid}`, {
      text: () => link,
    });
    clipboard.on('success', () => {
      message.success('已复制');
    });
    clipboard.on('error', () => {
      message.warning('浏览器不支持复制');
    });
    // 销毁 clipboard 实例
    return () => {
      clipboard.destroy();
    };
  }, []);
  return (
    <>
      <div className={styles.linkAddressText}>访问地址</div>
      <Space>
        <Input className={styles.linkInput} readOnly value={link} />
        <Tooltip title="复制">
          <Button icon={<CopyOutlined />} id={uuid} />
        </Tooltip>
        <Tooltip title="立即访问">
          <Button icon={<LinkOutlined />} onClick={() => window.open(link)} />
        </Tooltip>
      </Space>
    </>
  );
};

Button 处使用id 选择器是因为有多个地方引入了该组件，用class则会重复