Vue3自定义指令v-copy实现复制文字
Posted 胖鹅68
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3自定义指令v-copy实现复制文字相关的知识,希望对你有一定的参考价值。
一、文章参考
二、问题描述
工作中有时候会遇到需要实现点击复制的功能,但是不了解实现的原理,只是在网上查找到相关代码,然后copy 了事,无意间发现了有人将复制使用vue指令实现,并解释了如何实现的原理,在此做记录学习
三、案例实现
需求:
实现一键复制文本内容,用于鼠标右键粘贴。
思路:
- 动态创建
textarea
标签,并设置readOnly
属性及移出可视区域 - 将要复制的值赋给
textarea
标签的value
属性,并插入到body
- 选中值
textarea
并复制 - 将
body
中插入的textarea
移除 - 在第一次调用时绑定事件,在解绑时移除事件
Vue3 中定义指令
Vue3 指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
created
:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的v-on
事件监听器前调用的事件监听器时,这很有用。beforeMount
:当指令第一次绑定到元素并且在挂载父组件之前调用。mounted
:在绑定元素的父组件被挂载后调用。beforeUpdate
:在更新包含组件的 VNode 之前调用。
提示
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
updated
:在包含组件的 VNode 及其子组件的 VNode 更新后调用。beforeUnmount
:在卸载绑定元素的父组件之前调用unmounted
:当指令与元素解除绑定且父组件已卸载时,只调用一次。
v-copy指令实现
export const copy =
mounted: function (el, value )
console.log(arguments)
el.$value = value
// el控件定义 onclick 事件
el.onclick = () =>
// if (!el.$value)
// // 值为空的时候,给出提示。可根据项目UI仔细设计
// console.log('无复制内容')
// return
//
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 ios 下自动唤起键盘,同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
// textarea.value = el.$value
textarea.value ='huangbia11111111o'
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
const result = document.execCommand('Copy')
if (result)
console.log('复制成功') // 可根据项目UI仔细设计
document.body.removeChild(textarea)
// 绑定点击事件,就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
,
// 当传进来的值更新的时候触发
beforeUpdate(el, value )
el.$value = value
,
// 指令与元素解绑的时候,移除事件绑定
unmounted(el)
el.removeEventListener('click', el.handler)
,
export default copy
Vue3 定义全局指令
- 创建index.js 文件用来引入指令
import copy from './copyDirective'
export default function globalDirectivRegist (rootApp)
rootApp.directive('copy', copy)
- 利用root Vue对象定义全局指令
import globalDirectivRegist from './directive/index'
const app = createApp(App)
globalDirectivRegist(app)
使用
<span v-copy>huangbiao1111</span>
以上是关于Vue3自定义指令v-copy实现复制文字的主要内容,如果未能解决你的问题,请参考以下文章