<template>
  <div
    class="btn flex items-center justify-center cursor-pointer"
    ref="btn"
    :data-clipboard-text="copyTxt"
  >
    <slot></slot>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'
export default {
  props: {
    copyTxt: [String, Number],
  },
  mounted() {
    const clipboard = new Clipboard(this.$refs.btn)
    clipboard.on('success', function (e) {
      message.success('复制成功')
      e.clearSelection()
    })

    clipboard.on('error', function (e) {
      message.error('复制失败')
    })
  },
  methods: {},
}
</script>

<style scoped>
.btn {
  width: 60px;
  height: 30px;
  background: rgba(37, 69, 203, 0.1);
  border-radius: 15px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2545cb;
}
</style>
