ant design pro 技巧之自制复制到剪贴板组件

• 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 (<Tooltiptitle={intl.formatMessage({ id: 'copy.tooltip', defaultMessage: 'Copy data to clipboard' })}><CopyOutlined style={{ color: '#1890ff' }} onClick={copyText} /></Tooltip>);
};export default CopyToClipboard;

我们拥有 12 年建站编程经验

1. 虚拟产品交易平台定制开发
2. WordPress 外贸电商独立站建站

我的网站