vue2一键复制之vue-clipboard2的使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

前言

最近在项目中，用到了一键复制的功能，类似于掘金的【复制代码】功能（具体看下图），现记录一下实现方式

项目技术环境

💡 vue2 + vuex + yarn + vuetify

插件介绍

vue-clipboard2：前端可以调用剪切板的一个插件，也除了适配vue3版本的(vue-clipboard3)

插件安装

yarn add vue-clipboard2

// 或 
npm install vue-clipboard2

可以在package.json中看看安装版本

使用方法

1. 在main.js中注册

import VueClipBoard from 'vue-clipboard2'

// 使用VueClipBoard插件，主要功能：类似于剪切板
Vue.use(VueClipBoard)

1. 定义自定义指令v-copy

一般项目中有个directive.js，存储项目全局的自定义指令

// 全局copy指令
const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      Vue.prototype.$copyText(`${el.$value}`).then(
        () => {
          Vue.prototype.$notify.info('success', '复制成功！')
        },
        () => {},
      )
    }
    el.addEventListener('click', el.handler) // 绑定点击事件
  },

  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },

  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}

1. 在main.js中注册自定义指令（directive.js）

import * as directives from './util/directive'

// 注册全局指令
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key]) // 插入指令名和对应方法
})

1. 在需要实现的标签中使用v-copy指令

<div  @click.stop>
  <v-btn
    v-copy="item.id"
    v-show-tips="'复制'"
    icon
  >
    <v-icon size="1rem">
      mdi-content-copy
    </v-icon>
  </v-btn>
</div>

vue-clipboard3使用

实现基于vue3环境的复制功能，以下是从npm(vue-clipboard3)官网示例借鉴的，未经实践

安装

yarn add vue-clipboard3

// or
npm install --save vue-clipboard3

使用方法

<template lang="html">
  <button @click="copy">Copy!</button>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useClipboard from 'vue-clipboard3'

export default defineComponent({
  setup() {
    const { toClipboard } = useClipboard()

    const copy = async () => {
      try {
        await toClipboard('Any text you like')
        console.log('Copied to clipboard')
      } catch (e) {
        console.error(e)
      }
    }

    return { copy }
  }
})
</script>