44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React, { useState, useCallback, memo } from 'react';
|
|
import { Tooltip } from 'antd';
|
|
|
|
CopyTool.defaultProps = {
|
|
beforeText: '复制', //浮动过去显示的文字
|
|
afterText: '复制成功', //点击后显示的文字
|
|
className: '', //传给svg的class
|
|
inputId: 'copyText', //要复制的文本的ID
|
|
};
|
|
|
|
|
|
function CopyTool({ beforeText, afterText, className,inputId }) {
|
|
const [title, setTitle] = useState(() => {
|
|
return beforeText;
|
|
});
|
|
|
|
// 复制链接
|
|
const copyUrl = useCallback(() => {
|
|
let inputDom = document.getElementById(inputId);
|
|
if (!inputDom) {
|
|
console.error("您的CopyTool未设置正确的inputId");
|
|
return;
|
|
}
|
|
inputDom.select();
|
|
if (document.execCommand('copy')) {
|
|
document.execCommand('copy');
|
|
}
|
|
setTitle(afterText);
|
|
inputDom.blur();
|
|
}, []);
|
|
|
|
return (
|
|
<Tooltip
|
|
placement="top"
|
|
title={title}
|
|
onVisibleChange={() => { setTitle(beforeText) }}
|
|
>
|
|
<i className={`iconfont icon-fuzhiicon ${className}`} style={{ color: '#466aff' }} onClick={copyUrl}></i>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
|
|
export default memo(CopyTool); |