世界上最伟大的投资就是投资自己的教育
ant design pro 技巧之自制复制到剪贴板组件
随风发布于201 次阅读
- ant design pro 如何去保存颜色
- ant design pro v6 如何做好角色管理
- ant design 的 tree 如何作为角色中的权限选择之一
- ant design 的 tree 如何作为角色中的权限选择之二
- ant design pro access.ts 是如何控制多角色的权限的
- ant design pro 中用户的表单如何控制多个角色
- ant design pro 如何实现动态菜单带上 icon 的
- ant design pro 的表分层级如何处理
- ant design pro 如何处理权限管理
ant design pro 中 的 protable 是有一个选项可以控制是否能复制到剪贴板的
{
title: intl.formatMessage({ id: 'country' }),
width: 150,
dataIndex: 'country',
copyable: true,
valueEnum: convertToTextObject(locationMapping),
},
但是如何同时用上了 render 或 renderText, 这个 copyable 就会无效的。
所以我自己写了一个组件来实现一样的效果。
类似这个:
{
title: intl.formatMessage({ id: 'account_library' }),
dataIndex: 'accountLibrary',
hideInSearch: true,
width: 200,
renderText: (accountLibrary: {
accountNumber: string;
loginAccount: string;
loginPassword: string;
}) => (
<>
<div>
{intl.formatMessage({ id: 'order_account_number' })}: {accountLibrary?.accountNumber}
<CopyToClipboard text={accountLibrary?.accountNumber} />
</div>
<div>
{intl.formatMessage({ id: 'login_account' })}: {accountLibrary?.loginAccount}
<CopyToClipboard text={accountLibrary?.loginAccount} />
</div>
<div>
{intl.formatMessage({ id: 'login_password' })}: {accountLibrary?.loginPassword}
<CopyToClipboard text={accountLibrary?.loginAccount} />
</div>
</>
),
},
CopyToClipboard 这个组件是自己写的,我把源码分享出来,有需要的人可以拿一下。
import React from 'react';
import { Tooltip, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
interface Props {
text: any;
}
const CopyToClipboard: React.FC<Props> = (props) => {
const intl = useIntl();
const { text } = props;
const copyText = async () => {
try {
await navigator.clipboard.writeText(text);
message.success(
intl.formatMessage({ id: 'copy.success', defaultMessage: 'Text copied to clipboard' }),
);
} catch (err) {
message.error(intl.formatMessage({ id: 'copy.error', defaultMessage: 'Copy failed' }));
}
};
return (
<Tooltip
title={intl.formatMessage({ id: 'copy.tooltip', defaultMessage: 'Copy data to clipboard' })}
>
<CopyOutlined style={{ color: '#1890ff' }} onClick={copyText} />
</Tooltip>
);
};
export default CopyToClipboard;
我们拥有 12 年建站编程经验
- 虚拟产品交易平台定制开发
- WordPress 外贸电商独立站建站
本站文章均为原创内容,如需转载请注明出处,谢谢。
0 条回复
暂无回复~~
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top