1、v-copy
需求:实现一键复制文本内容,用于鼠标右键粘贴。
思路:
- 动态创建
textarea
标签,并设置readOnly
属性及移出可视区域 - 将要复制的值赋给
textarea
标签的value
属性,并插入到body
- 选中值
textarea
并复制 - 将
body
中插入的textarea
移除 - 在第一次调用时绑定事件,在解绑时移除事件
const copy = {
bind(el, { value }) {
el.$value = value
el.handler = () => {
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 插入到 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)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候,移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default copy
使用:给 Dom 加上 v-copy
及复制的文本即可
<template>
<button v-copy="copyText">复制</button>
</template>
<script> export default {
data() {
return {
copyText: 'a copy directives',
}
},
} </script>
2、v-longpress
需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件
思路:
- 创建一个计时器, 2 秒后执行函数
- 当用户按下按钮时触发
mousedown
事件,启动计时器;用户松开按钮时调用mouseout
事件。 - 如果
mouseup
事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件 - 如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。
- 在移动端要考虑
touchstart
,touchend
事件
const longpress = {
bind: function (el, binding, vNode) {
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器( 2秒后执行函数 )
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
re