超级好用的复制功能-clipboard(vue)

废话不多说直接上代码

1. 创建clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {  //复制成功提示
  Vue.prototype.$message({
    message: 'Copy successfully',
    type: 'success',
    duration: 1500
  })
}

function clipboardError() { //复制错误提示
  Vue.prototype.$message({
    message: 'Copy failed',
    type: 'error'
  })
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

2. 使用

<script>
import clipboard from '@/utils/clipboard'
export default {
  name: 'MapView',
  data() {
    return {
      coordinates: ''
    }
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<template>
  <div class="app-container">
    <div v-if="coordinates" class="coordinate" @click="handleClipboard(coordinates,$event)">
      坐标信息：{{ coordinates }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  padding: 0px 20px 25px 20px;
  position: relative;
  .coordinate{
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 9;
    background: #e3e3e3;
    padding: 5px 10px;
    max-width: 400px;
  }
}

</style>