前言
最近在项目中,用到了一键复制的功能,类似于掘金的【复制代码】功能(具体看下图),现记录一下实现方式
项目技术环境
## 插件介绍**vue-clipboard2:前端可以调用剪切板的一个插件,也除了适配vue3版本的(vue-clipboard3)
插件安装
yarn add vue-clipboard2
// or
npm install vue-clipboard2
可以在package.json
中看看安装版本
使用方法
- 在
main.js
中注册
import VueClipBoard from 'vue-clipboard2'
// 使用VueClipBoard插件,主要功能:类似于剪切板
Vue.use(VueClipBoard)
- 定义自定义指令
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)
},
}
- 在
main.js
中注册自定义指令(directive.js
)
import * as directives from './util/directive'
// 注册全局指令
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key]) // 插入指令名和对应方法
})
- 在需要实现的标签中使用
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使用
<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('复制成功')
} catch (e) {
console.error(e)
}
}
return { copy }
}
})
</script>