📂tsvue3
🔖TSvue
2022-12-29 15:53阅读: 1436评论: 0推荐: 1

vue3+TS 自定义指令:长按触发绑定的函数

vue3+TS 自定义指令:长按触发绑定的函数

偶然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢。

编写自定义指令时遇到的几个难点

1.自定义指令的类型

在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存在

2.在ts中使用setTimeout() 函数

setTimeout()函数的默认返回值是一个随机的number ,这个number 代表了这个计时器的唯一id,但是并不能直接将其类型定义为number 否则可能会出现报错。

3.自定义指令的传参问题

我这里的传参方法只做参考,写的很不规范。具体的好多传参的方法请自行搜索

代码

这个是我自己编写的长按触发绑定的函数
directives/longPress.ts

import { ObjectDirective } from 'vue'

const LongPress: ObjectDirective = {
  // 组件mounted时执行指令
  mounted(el, binding, vNode) {
    // 确保提供的表达式是函数
    if (typeof binding.value !== 'function') {
      // // 将警告传递给控制台
      let warn = `[longpress:] provided expression '${binding.value}' is not afunction, but has to be `
      console.log(warn)
    } else {
      console.table({ el, binding, vNode })
      let timer: ReturnType<typeof setTimeout> | null = null  //定义空 定时器
      const start = (e: MouseEvent | TouchEvent) => {
        console.log(e)
        //下列事件不执行1.不是鼠标左键2.单击事件  (3.没有传入长按时间 ?? 有默认)
        if ((<MouseEvent>e).button !== 0 && e.type === 'click') {
          return
        }
        if (timer == null) {
          timer = setTimeout(() => {
            handler()
          },(binding.arg ? Number(binding.arg) : 0.5) * 1000) //默认长按0.5秒执行绑定的函数
        }
      }
      const cancel = () => {
        if (timer !== null) {
          clearTimeout(timer)
          console.log(timer);//定时器默认返回一个随机的number 这个number的值是这个定时器的id
          timer = null
        }
      }
      const handler = () => {
        binding.value()
      }
      // 添加事件监听器
      el.addEventListener('mousedown', start)
      el.addEventListener('touchstart', start)
      // 取消计时器
      el.addEventListener('click', cancel)
      el.addEventListener('mouseout', cancel)
      el.addEventListener('touchend', cancel)
      el.addEventListener('touchcancel', cancel)
    }
  },
}

export default LongPress

在main.ts中引入 作为全局自定义指令

import { createApp } from 'vue'
import App from './App.vue'
import LongPress from './directives/longpress'

const app = createApp(App)
app.directive('longPress',LongPress)
app.mount('#app')

在组件中使用
这里的v-longPress 便是自定义指令,其中此处的参数传递方法仅供参考

<template>
  <div>
    <button v-longPress = 'longFunc,1' >longPress</button>
  </div>
</template>

<script setup lang="ts">
const longFunc = () => {
  console.log('click long btn');
  alert('click long btn')
}
</script>

<style scoped>

</style>

本文作者:bbigger004

本文链接:https://www.cnblogs.com/bbigger004/p/17012784.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   bbigger004  阅读(1436)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码:从基础到乱码解决
· SpringCloud带你走进微服务的世界
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 学園天国 高橋李依
  2. 2 まっすぐ 高橋李依
学園天国 - 高橋李依
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词:阿久悠

作曲:井上忠夫

编曲:久下真音

原唱:フィンガー5

演唱:高木さん with 2年2組(高木さん/西片/木村/高尾/ミナ/ユカリ/サナエ

Are you ready?

Yeah

Hey hey hey hey hey(Hey hey hey hey hey

Hey hey hey hey hey(Hey hey hey hey hey)

Hey(hey) hey(hey) hey(hey) hey(hey)

Wow

あいつもこいつもあの席を

ただ一つねらっているんだよ

このクラスで一番の 美人の隣りを

ああー みんなライバルさ

ああー いのちがけだよ

(Wow)Yeah...

運命の女神さまよ

このぼくにほほえんで

一度だけでも wow...

勉強する気もしない気も

この時にかかっているんだよ

もし駄目ならこのぼくは

もうグレちまうよ

Hey hey hey hey hey(Hey hey hey hey hey)

Hey hey hey hey hey(Hey hey hey hey hey)

Hey(hey) hey(hey) hey(hey) hey(hey)

Wow...

ん...Yeah

ん...Yeah

二枚目気どりの秀才や

あのいやな悪党番長も

胸はずませ待っている どの席になるか

ああー あの横顔を

ああー みつめられたら

(Wow)Yeah...

授業中 天国だよ

このぼくにしあわせを

与えておくれ yeah...

勉強する気もしない気も

この時にかかっているんだよ

もし駄目ならこのぼくは

もうグレちまうよ

Hey