Tantalum UI

Copy 复制

注：

  • 这是个包裹组件，本身不带展示效果，怎么展示通过 slot 来实现
  • 不依赖 Flash，所以在某些老版本浏览器上可能失败
import { TaCopy, TaButton, TaGroup, showToast } from '@/index'

export default function ExpCopy() {
  const onSuccess = (text: string) => {
    showToast({
      title: `${text}`,
      type: 'success'
    })
  }

  const onError = (error: Error) => {
    showToast({
      title: error.message,
      type: 'fail'
    })
  }

  return (
    <>
      <TaGroup title="基本用法">
        <div className="exp-copy-pad">
          <TaCopy className="exp-copy-box" text="复制的文本">
            <TaButton type="primary">点击复制</TaButton>
          </TaCopy>
        </div>
      </TaGroup>
      <TaGroup title="事件监听">
        <div className="exp-copy-pad">
          <TaCopy
            className="exp-copy-box"
            text="复制的文本2"
            onSuccess={onSuccess}
            onError={onError}
          >
            <TaButton type="primary">点击复制</TaButton>
          </TaCopy>
        </div>
      </TaGroup>
    </>
  )
}

Import 

import { TaCopy } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
textstring是需要复制的文本

Events

事件描述回调函数参数
onSuccess复制成功时触发text: string 复制的文本
onError复制出错时触发e: Error

Slots 

<TaCopy text="复制的文本">点击复制</TaCopy>