世界上最伟大的投资就是投资自己的教育

首页Ant Design Pro
随风 · 练气

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

随风发布于201 次阅读

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 年建站编程经验

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

我的网站

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
统计信息
    学员: 29974
    视频数量: 1996
    文章数量: 526

© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top