<template>
  <span class="copy" v-if="textContent">
    <slot/>{{text}}
    <i v-if="!!textContent" @click="copyText" title="复制" class="el-icon-document-copy"></i>
  </span>
</template>

<script>
import copy from 'copy-to-clipboard'

export default {
  name: 'copy-text',
  props: {
    text: {
      type: String,
      default: ''
    },
    hint: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    textContent() {
      return this.$slots.default || this.text
    }
  },
  methods: {
    copyText() {
      const slot = this.$slots.default || []
      const text = slot[0]?.text || this.text
      if (text) {
        copy(text)
        if (this.hint) {
          this.$message.success('复制成功')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.copy{
  .el-icon-document-copy{
    cursor: pointer;
  }
}
</style>
