vue 复制-粘贴

import { Message } from 'element-ui'

const cssText = 'position:fixed;pointer-events:none;z-index:-9999;opacity:0;'

const $clipboard = (input) => {
  let value

  if (typeof input !== 'string') {
    try {
      value = JSON.stringify(input)
    } catch (e) { }
  } else {
    value = input
  }

  const textarea = document.createElement('textarea')

  textarea.value = value
  textarea.setAttribute('readonly', '')
  textarea.style.cssText = cssText

  document.body.appendChild(textarea)
  textarea.select()

  let success = false

  try {
    success = document.execCommand('copy')
  } catch (err) {
    console.warn(err)
  }

  if (success) {
    Message.success('复制成功，快去粘贴吧~')
  } else {
    Message.error('复制失败，请重新复制')
  }

  document.body.removeChild(textarea)

  return success
}

export default {
  install (Vue) {
    Vue.prototype.$clipboard = $clipboard

    const generateId = ((id) => () => '$' + id++)(1)
    const handlers = {}

    const removeHandler = (id) => {
      if (id) {
        handlers[id] = null
        delete handlers[id]
      }
    }

    const addHandler = (func) => {
      const id = generateId()
      handlers[id] = func

      return id
    }

    Vue.directive('clipboard', {
      bind (el, binding) {
        const { arg, value } = binding

        switch (arg) {
          case 'error':
            const errorHandlerId = addHandler(value)
            el.dataset.clipboardErrorHandler = errorHandlerId
            return

          case 'success':
            const successHandlerId = addHandler(value)
            el.dataset.clipboardSuccessHandler = successHandlerId
            return

          default:
            const clickEventHandler = (event) => {
              if (binding.hasOwnProperty('value')) {
                const payload = {
                  value: typeof value === 'function' ? value() : value,
                  event
                }

                const handlerId = $clipboard(payload.value)
                  ? el.dataset.clipboardSuccessHandler
                  : el.dataset.clipboardErrorHandler

                const handler = handlers[handlerId]

                if (handler) {
                  handler(payload)
                }
              }
            }

            const clickEventHandlerId = addHandler(clickEventHandler)

            el.dataset.clipboardClickHandler = clickEventHandlerId
            el.addEventListener('click', handlers[clickEventHandlerId])

          // return
        }
      },

      unbind (el) {
        const {
          clipboardSuccessHandler,
          clipboardErrorHandler,
          clipboardClickHandler
        } = el.dataset

        removeHandler(clipboardSuccessHandler)
        removeHandler(clipboardErrorHandler)

        if (clipboardClickHandler) {
          el.removeEventListener('click', handlers[clipboardClickHandler])
          removeHandler(clipboardClickHandler)
        }
      }
    })
  }
}

使用方法

v-clipboard="()=>code"