首页
学习
活动
专区
圈层
工具
发布

【vue】自定义指令实现 复制、长按、水印 功能

前言 在 vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。...longpress.js 用于 实现 长按 waterMarker.js 用于 实现 水印功能 目录结构截图 二、新建文件 在上述步骤新建完目录后,开始按照目录结构 新建 具体的文件,首先 directives...textarea = document.createElement("textarea"); // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea...如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件 如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。...{ methods: { longpress () { alert('长按指令生效') } } } 3、vue-waterMarker 需求:

54210
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue自定义指令实现长按功能

    最近加了一个新的需求,要求有消息的撤回功能,长按自己发送的消息,弹出撤销框,点击撤销框可以撤销自己发送的消息。 ​...这个移动端的长按功能vue并没有原生支持,而是需要组合touchstart和touchend两个事件一起才能完成。 具体原理就是手指按下的时候触发定时器,当手指抬起的时候关闭定时器。...在一定的时间内(800毫秒)如果没有抬起则认为是长按需要触发长按操作逻辑。 这里不仅需要两个事件。而且还需要引入额外的变量,也就是定时器。...至于具体的长按逻辑则由外部传递进来,通过bind函数的入参拿到。 最后需要长按指令的组件我们可以使用v-longpress="myfunc"来方便的使用起来

    1K20

    小程序图片长按识别功能的实现

    https://blog.csdn.net/u011415782/article/details/82218275 背景 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码...在百度无果,参考小程序官方文档后,发现: 1.文档中有一句提示: "image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别" 2.即便实现了...“wx.previewImage” 效果,但依旧是不支持二维码识别的 附录文档位置:小程序图片长按识别 代码设计 好在这也是一个不错的知识点,在此进行一番实现流程的记录,欢迎指摘. ①. wxml...js 文件中,添加了如下的方法 /** * 图片预览方法 * 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦 * 当然,做过图片上传功能的应该会注意到...如果发送给了好友或者自行保存后,在微信中打开的并长按的效果如下: ? 怎么说呢?我也好无奈啊 …

    1.4K10

    iOS中的浅复制与深复制

    引 当谈到对象复制时都绕不开浅复制与深复制的区分,它们是什么意思呢? 浅复制:只复制对象的指针,两个对象指向的还是同一个地址的内容,操作一个时会影响另一个的值。...深复制:复制对象的内容,两个对象指向两个不同地址的内容,操作一个时不会影响另一个的值。 在OC中,因为采用内存计数的方式管理内存,所以浅复制时会对同一个内容计数加一,深复制则不会。...因为浅复制、深复制这两个概念其实并不完全,更准确的应该分为三种:浅复制、深复制、完全深复制。...先说说简单的浅复制与深复制,其实与非集合对象差不多: 对于不可变集合对象(如NSArray),copy操作是浅复制,只会复制指针,mutableCopy操作是深复制, 对于可变集合对象(如NSMutableArray...另一种方法是对集合做归档和解档(关于归档与解档可以看传送门:iOS存储方式之归档): NSArray *trueDeepCopyArray = [NSKeyedUnarchiver unarchiveObjectWithData

    1.2K20

    小程序图片长按识别功能的实现

    背景 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码 在百度无果,参考小程序官方文档后,发现: 1.文档中有一句提示: "image组件中二维码/小程序码图片不支持长按识别,...仅在 wx.previewImage 中支持长按识别" 2.即便实现了 “wx.previewImage” 效果,但依旧是不支持二维码识别的 附录文档位置:小程序图片长按识别 代码设计 好在这也是一个不错的知识点...js 文件中,添加了如下的方法 /** * 图片预览方法 * 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦 * 当然,做过图片上传功能的应该会注意到...实现效果 可以发现,下图中是没有“识别图中二维码”的选项 [ezfb89mkwr.png] 如果发送给了好友或者自行保存后,在微信中打开的并长按的效果如下: [95zan0h7rn.png] 怎么说呢?

    2.3K10

    CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

    使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。 在写页面时如何避免此类情况的发生呢?我们可以使用 CSS 来屏蔽图片的选中。 ?...img { pointer-events: none; } 如果只是禁止图片选中,长按图片不会有问题,但是如果是先选择旁边的文字,同时选中了图片,那图片照样会被复制出来。...再给元素的 CSS 中添加如下两行代码: -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 这时候禁止选中文字就没有问题了...,可以实现整篇文章不可复制或保存。...声明:本文由w3h5原创,转载请注明出处:《CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制》 https://www.w3h5.com/post/98.html

    8.1K00

    iOS 复制知识点总结

    2、自定义对象的复制 使用copy和mutableCopy复制对象的副本使用起来确实方便,那么我们自定义的类是否可调用copy与mutableCopy方法来复制副本呢?...我们将复制副本的代码换成如下: Person *person2 = [person1 mutableCopy];//复制副本 再次运行程序,程序同样崩溃了,并输出去以下错误信息: [Person mutableCopyWithZone...其实当程序调用对象的copy方法来复制自身时,底层需要调用copyWithZone:方法来完成实际的复制工作,copy返回实际上就是copyWithZone:方法的返回值;mutableCopy与mutableCopyWithZone...对象中obj2对象中的属性值也变了,因为对于这个对象并没有进行copy操作,这样的复制操作不是完全的复制,如果要实现完全的复制,需要将obj2对应的类也要实现copy,然后这样赋值:person.obj2...参考文章: ---- iOS之对象复制 www.jianshu.com/p/ac07c26f467d iOS的深复制与浅复制 ibloodline.com/articles/2016/03/10/memory3

    979110
    领券