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

news2024/11/13 9:28:26

在这里插入图片描述

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

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

我的网站

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2056129.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PyCharm安装】安装Python和PyCharm的注意事项!!!PyCharm常用的插件介绍。

安装Python的注意事项 确定所需版本&#xff1a;根据您的项目和库的要求&#xff0c;选择合适的Python版本进行安装。不同版本的Python可能支持不同的库和特性。确保网络连接&#xff1a;如果您使用的是在线安装方式&#xff0c;确保您的计算机有可靠的网络连接&#xff0c;以…

《Techporters架构搭建》-Day07 集成API文档工具

API文档化 前言API文档化历史集成Knife4j常用注解基本信息注解分组注解请求方法注解路径注解 使用示例 源码地址&#xff1a;请看day07 前言 在现代软件开发中&#xff0c;良好的API文档是团队协作和项目管理中不可或缺的一部分。OpenAPI规范&#xff08;前身为Swagger&#x…

AI绘画Stable Diffusion插件—LayerDiffusion 分层控图新突破!生成透明图片前后景图片融合,毫无违和感!

大家好&#xff0c;我是画画的小强 用AI绘画Stable Diffusion 生成透明图片怎么搞&#xff1f; 这要搁之前&#xff0c;我们需要生成完图片&#xff0c;然后放到去背景插件中调整参数去除背景&#xff01;效果一般般 如果想要在一张图片上添加主体&#xff0c;该怎么搞&#…

使用gpreftools测试性能

参考文献&#xff1a; C 性能分析工具调研_性能分析工具 gperf perf vergi 比较-CSDN博客性能测试工具CPU profiler(gperftools)的使用心得-CSDN博客gperftools使用方法和常见问题_pprof no nodes to print-CSDN博客c 分析 gperftools 总结 | Weakyon Blog 文章目录 安装使用 …

如何搭建知识库?2024年6款工具优质推荐

一、引言 在当今信息化时代&#xff0c;知识管理已成为企业提升竞争力和实现持续发展的关键。搭建一个高效、易用的知识库&#xff0c;不仅能帮助企业更好地整合和分享内部资源&#xff0c;还能提升员工的工作效率和创新能力。本文将详细介绍如何搭建知识库&#xff0c;并推荐…

制作语音数据集: 爬取B站音视频+基于whisper语音识别标注

本文以制作小学课堂音频数据集为例子 1. 搜索关键字获取音视频链接 if __name__ "__main__":with sync_playwright() as playwright:searcher BLVideoSearch(playwright, headlessTrue)url searcher.make_url(keyword["小学公开课"])searcher.run(url, …

英文科目一外国人要考中国驾照理论考试题目是什么样的

随着中国的国际化发展&#xff0c;越来越多的外国朋友选择在中国生活和工作&#xff0c;其中一些人可能会考虑在这里考取驾驶执照。然而&#xff0c;语言障碍成为了他们面临的一大挑战。一个常见的问题是科目一考试是否提供英文版本或者是否有翻译服务。本文将介绍中国车管所提…

什么是IP?

目录 简介 IP IP协议 IP地址 发展历程 IP地址类型 公有地址 私有地址 IP地址编址方式 A类IP地址 B类IP地址 C类IP地址 D类IP地址 特殊的网址 子网 超网 无类间路由 IP地址的分配 IP地址管理 手工管理模式 DHCP分配IP地址的管理模式 通过交换机管理IP 地址…

分布式ID-一窥雪花算法的原生实现问题与解决方案(CosId)

分布式ID-雪花算法的问题与方案&#xff08;CosId&#xff09; 基本原理 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url%E5%88%86%E5%B8%83%E5%BC%8FID-%E9%9B%AA%E8%8A%B1%E7%AE%9…

微分方程(Blanchard Differential Equations 4th)中文版Section1.6

平衡点与相直线 给定一个微分方程 d y d t = f ( t , y ) , \frac{dy}{dt} = f(t, y), dtdy​=f(t,y), 我们可以通过绘制斜率场和勾勒图形来大致了解解的行为,或者使用欧拉法计算近似解。有时我们甚至可以推导出解的显式公式并绘制结果。所有这些技术都需要相当多的工作,无…

武汉流星汇聚:西班牙时尚消费高涨,中国商家借亚马逊平台拓商机

在2024年第二季度的亚马逊西班牙站&#xff0c;一场前所未有的时尚盛宴正悄然上演。销售额同比高增长TOP10品类榜单的揭晓&#xff0c;不仅揭示了西班牙消费者对于时尚品类的狂热追求&#xff0c;更为亚马逊平台上的中国商家开启了一扇通往新蓝海的大门。其中&#xff0c;男士拳…

使用LlamaIndex中的Reli 进行实体链接和关系提取

从文本中构建知识图谱一直是一个引人入胜的研究领域。随着大型语言模型(LLM)的出现,这一领域获得了更多主流关注。然而,大型语言模型的成本可能相当高昂。另一种方法是对较小的模型进行微调,这种方法得到了学术研究的支持,并产生了更有效的解决方案。今天,我们将探讨罗马…

redis mysql oracle mssql postgresql提权工具mdut

mdut工具使用 mdut用于数据库的连接&#xff0c;连接成功后可用户反弹shell&#xff0c;命令执行 mdut工具运行说明 1&#xff0c;此工具需要在jdk1.8的环境下运行 2&#xff0c;下载完工具包之后&#xff0c;找到java1.8环境&#xff0c;运行jar文件 java.exe -jar Multipl…

Linux Redis 删除指定库下所有 Key

代码示例 以下是每一步需要执行的代码及其注释&#xff1a; 连接 Redis redis-cli -h <hostname> -p <port> -a <password>-h&#xff1a;指定 Redis 服务器的主机名。 -p&#xff1a;指定 Redis 服务器的端口号。 -a&#xff1a;指定 Redis 服务器的密码。…

基于Arch的轻量级发行版Archcraft结合内网穿透实现远程SSH连接

文章目录 前言1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定SSH公网地址6. SSH固定地址连接 前言 本文主要介绍如何在Archcraft系统中安装Cpolar内网穿透工具,并以实现Windows环境ssh远程连接本地局域网Archcraft系统来说明使用内网…

ubuntu安装虚拟环境(tensorflow、torch)

一、安装需求 1、确保ubuntu可以ping通百度 2、设置好了pip镜像源&#xff0c;&#xff08;具体可看&#xff1a;ubuntu配pip的源-CSDN博客&#xff09; 二、安装虚拟环境&#xff08;务必使用sudo进行&#xff09; step1&#xff1a;执行安装命令 更改了pip默认使用pip3的…

SpringBoot+Vue在线商城(电子商城)系统-附源码与配套论文

摘 要 随着互联网技术的发展和普及&#xff0c;电子商务在全球范围内得到了迅猛的发展&#xff0c;已经成为了一种重要的商业模式和生活方式。电子商城是电子商务的重要组成部分&#xff0c;是一个基于互联网的商业模式和交易平台&#xff0c;通过网络进行产品和服务的销售。…

18705 01背包问题

### 分析 这是一个典型的0/1背包问题。我们需要在有限的背包容量下&#xff0c;选择若干物品&#xff0c;使得获得的总价值最大。可以使用动态规划来解决这个问题。 ### 伪代码 1. 定义一个一维数组dp&#xff0c;其中dp[j]表示容量为j的背包能获得的最大价值。 2. 初始化dp[0…

STM32的相关简单介绍

一、什么是STM32 STM32是ST公司设计的一系列以ARM Cortex-M为核心的32位微控制器 ST公司&#xff0c;即意法半导体集团(STMicrolectronics,简称ST)&#xff0c;1987年成立。由意大利的SGS微电子公司和法国Thomson半导体公司合并而成。 在当下的32位微控制器中&#xff0c;STM…

系统主机加固的十个方法,教你做好主机加固

环境背景 随着全球数字化转型的加速&#xff0c;企业IT环境变得愈发复杂&#xff0c;服务器主机面临的安全威胁也日益多样化。无论是工业控制系统、企业内部网络、企业内部服务器&#xff0c;还是云计算环境&#xff0c;都可能成为网络攻击的目标。此外&#xff0c;随着“工业…