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

news2024/9/19 15:27:53

在这里插入图片描述

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;