copy-button.vue 857 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <i
  3. class="el-icon-copy-document tag-read"
  4. v-if="copyText"
  5. @click="copy(copyText)"
  6. :data-clipboard-text="copyText">
  7. </i>
  8. </template>
  9. <script>
  10. import Clipboard from 'clipboard'
  11. export default {
  12. name: 'CopyButton',
  13. props: {
  14. copyText: { // 复制文本
  15. type: String,
  16. default: ''
  17. }
  18. },
  19. data() {
  20. return {
  21. }
  22. },
  23. methods: {
  24. copy() {
  25. const clipboard = new Clipboard('.tag-read');
  26. // clipboard.on('success', e => {
  27. // this.$successMsg('复制成功');
  28. // })
  29. clipboard.on('error', e =>{
  30. console.log('该浏览器不支持复制');
  31. return false;
  32. })
  33. this.$successMsg('复制成功');
  34. },
  35. }
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .tag-read {
  40. color: #409EFF;
  41. cursor: pointer;
  42. margin-right: 4px;
  43. }
  44. </style>