Skip to content

一键复制

js
// 方案一:
// 方案二:
import { Notification } from 'element-ui'

Vue.directive('copy', {
  bind(el) {
    el.addEventListener('click', () => {
      const range = document.createRange()
      range.selectNode(el)
      window.getSelection().addRange(range)
      document.execCommand('copy')
      window.getSelection().removeAllRanges()
    })
  }
})
export const COPY = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        Notification.success({
          title: '无复制内容',
        })
        return
      }
      const textarea = document.createElement('textarea')
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      textarea.value = el.$value
      document.body.appendChild(textarea)
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        Notification.success({
          title: '复制成功',
        })
      }
      document.body.removeChild(textarea)
    }
    el.addEventListener('click', el.handler)
  },
  componentUpdated(el, { value }) {
    el.$value = value
  },
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}