Tantalum UI

Appearance

Return to top
On this page

Copy 复制

注：

  • 这是个包裹组件，本身不带展示效果，怎么展示通过 slot 来实现
  • 不依赖 Flash，所以在某些老版本浏览器上可能失败
vue
<template>
  <ta-group title="基本用法">
    <div class="exp-copy-pad">
      <ta-copy class="exp-copy-box" text="复制的文本">
        <ta-button type="primary">点击复制</ta-button>
      </ta-copy>
    </div>
  </ta-group>
  <ta-group title="事件监听">
    <div class="exp-copy-pad">
      <ta-copy class="exp-copy-box" text="复制的文本2" @success="onSuccess" @error="onError">
        <ta-button type="primary">点击复制</ta-button>
      </ta-copy>
    </div>
  </ta-group>
</template>

<script lang="ts">
import { showToast } from '@/index'
import { defineComponent } from 'vue'

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

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

    return {
      onSuccess,
      onError
    }
  }
})
</script>

Import

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

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

Props

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

Events

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

Slots

vue
<ta-copy text="复制的文本">复制</ta-copy>