quasar/docs/src/components/DocCode.vue at a1c19cee2fa07bb8b91ec2a5ec7921773dac040a · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template lang="pug">
div
  code-prism(:lang="lang")
    slot

  .absolute(style="top: 8px; right: 8px;")
    q-btn(
      color="primary"
      round
      dense
      flat
      icon="content_copy"
      @click="copyToClipboard"
    )
      q-tooltip Copy to Clipboard

  transition(
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  )
    q-badge.absolute(
      v-show="copied"
      style="top: 16px; right: 58px;"
    ) Copied to clipboard
</template>

<script>
import CodePrism from './CodePrism.js'

export default {
  name: 'DocCode',

  components: {
    CodePrism
  },

  props: {
    lang: {
      type: String,
      default: 'js'
    }
  },

  data: () => ({ copied: false }),

  methods: {
    copyToClipboard () {
      const markup = this.$el.querySelector('pre')

      markup.setAttribute('contenteditable', 'true')
      markup.focus()

      document.execCommand('selectAll', false, null)
      document.execCommand('copy')
      markup.removeAttribute('contenteditable')

      if (window.getSelection) {
        const sel = window.getSelection()

        if (sel.removeAllRanges) {
          sel.removeAllRanges()
        }
        else if (sel.empty) {
          sel.empty()
        }
      }
      else if (document.selection) {
        document.selection.empty && document.selection.empty()
      }

      this.copied = true
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.copied = false
        this.timer = null
      }, 2000)
    }
  }
}
</script>