forgeplus-react/src/forge/Component/CopyTool.jsx

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);