diff --git a/src/copy/demos/custom.tsx b/src/copy/demos/custom.tsx index 4691525de..07fee3835 100644 --- a/src/copy/demos/custom.tsx +++ b/src/copy/demos/custom.tsx @@ -8,11 +8,11 @@ export default () => { return ( <>
- 复制文本} /> +

{text}

- 复制文本} tooltip={false} /> +

{text}

diff --git a/src/copy/demos/disabled.tsx b/src/copy/demos/disabled.tsx new file mode 100644 index 000000000..eac7a7bfc --- /dev/null +++ b/src/copy/demos/disabled.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Copy } from 'dt-react-component'; + +const text = + '基于 ant-design 的 React UI 组件库。 主要用于中,后台产品。我们的目标是满足更具体的业务场景组件。 当然,我们也有基于原生 javascript 实现的业务组件,例如ContextMenu,KeyEventListener等.'; + +export default () => { + return ( + <> +
+ +

{text}

+
+
+ +

{text}

+
+ + ); +}; diff --git a/src/copy/index.md b/src/copy/index.md index df1e3cb08..7d60e6f6a 100644 --- a/src/copy/index.md +++ b/src/copy/index.md @@ -16,14 +16,16 @@ demo: + ### API | 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | --------------------------------------- | ----------------------------------- | -| text | 需要复制的文本 | `string` | - | -| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | `复制` | | button | 自定义按钮 | `React.ReactNode` | `` | -| style | 样式 | `React.CSSProperties` | -- | | className | 样式 | `string` | -- | +| disabled | 是否禁用 | `boolean` | false | +| style | 样式 | `React.CSSProperties` | -- | +| text | 需要复制的文本 | `string` | -- | +| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | `复制` | | onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` | diff --git a/src/copy/index.tsx b/src/copy/index.tsx index e8f84c848..17a16c6c6 100644 --- a/src/copy/index.tsx +++ b/src/copy/index.tsx @@ -12,6 +12,7 @@ export interface ICopyProps { style?: CSSProperties; className?: string; tooltip?: LabelTooltipType; + disabled?: boolean; onCopy?: (text: string) => void; } @@ -38,16 +39,18 @@ const Copy: React.FC = (props) => { tooltip = '复制', style, className, + disabled = false, onCopy = () => message.success('复制成功'), } = props; const handleCopy = () => { + if (disabled) return; new CopyUtils().copy(text, () => onCopy(text)); }; const renderCopyButton = () => ( handleCopy()} > diff --git a/src/copy/style.scss b/src/copy/style.scss index 7d7af8465..fbe12836d 100644 --- a/src/copy/style.scss +++ b/src/copy/style.scss @@ -1,7 +1,12 @@ .dtc-copy { display: inline-block; + color: #1D78FF; cursor: pointer; + &--disabled { + cursor: not-allowed; + color: #B1B4C5; + } &__default-icon { - color: #1D78FF; + font-size: 16px; } }