专栏首页方球useMousewheel 实现鼠标滚轮数字控制

useMousewheel 实现鼠标滚轮数字控制

select-video.gif

import {
  computed,
  ref, watch
} from 'vue'
import {
  useToggle,
  useBool
} from 'vx-hooks'

/* eslint-disable  @typescript-eslint/no-explicit-any */
export type MouseWheelDirection = 'up' | 'down'

/**
 * 鼠标滚轮
 * @module hooks
 * @returns { Object }
 * - wheelEvent 滚轮事件对象
 * - direction 滚动方向 'up' | 'down'
 * - isUp 滚动方向是否为上
 * 
 * - setUp() direction 设置为 'up'
 * - setDown() direction 设置为 'down'
 * - onMousewheel() 鼠标滚轮事件
 * 
 * - disabled 是否响应滚轮事件
 * - canUse disabled 设置为 false 开启 onMousewheel
 * - unUse disabled 设置为 true 关闭 onMousewheel
 * 
 * @example
 * 
 * <a-input-number
 *  @focus.stop='onFocus'
 *  @blur.stop='onBlur'
 *  v-model:value='valueProxy'
 *  >
 * </a-input-number>
 * 
 * 
 * {
 *   props: {
 *    value: { type: Number, default: 0 },
 *    step: { type: Number, default: 1 } 
 *   },
 *   setup(props, ctx){
 *      const valueProxy = computed<number>({
 *    get(){
 *       return props.value
 *    },
 *      set(d: number){
 *       ctx.emit('update:value', d)
 *      }
 *    })
 *
 *    const {
 *      isUp,
 *      canUse,
 *      unUse,
 *      wheelEvent,
 *      onMousewheel
 *    } = useMousewheel()
 *
 *    watch(wheelEvent, () =>  {
 *      isUp.value ? valueProxy.value -= props.step : valueProxy.value += props.step
 *    })
 *    
 *    const onFocus = canUse
 *    const onBlur = unUse
 *    
 *    return { ... }
 *  }
 * }
 * 
 */
export default function useMousewheel() {
  const wheelEvent = ref<any>()
  const { state: direction, setLeft: setUp, setRight: setDown } = useToggle('up', 'down')
  const { state: disabled, setTrue: unUse, setFalse: canUse } = useBool()
  const isUp = computed(() => direction.value === 'up')

  watch(wheelEvent, (newVal) => {
    if (newVal) {
      newVal.deltaY as number < 0 ? setUp() : setDown()
    }
  })

  const onMousewheel = (e: any) => {
    if (disabled.value) {
      return
    }
    wheelEvent.value = e
  }

  return {
    wheelEvent,
    direction,
    isUp,
    setUp,
    setDown,

    disabled,
    canUse,
    unUse,

    onMousewheel
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Day3:Github项目每日优选之react-use

    各位宝友大家好,今天给大家带来了 react-use 。咱说心里话,这个东西我第一次看见真觉得捡到了宝儿。React hooks我相信很多同学已经门清了,这个库...

    疯狂的技术宅
  • Vue&uni-app swiper 轮播支持鼠标滚轮实现

    最近使用 uni-app 开发的一个 H5 项目,其中有一个 用 uni-app 原生 swiper 组件写的轮播。

    德顺
  • Vue&uni-app swiper 轮播支持鼠标滚轮实现

    最近使用 uni-app 开发的一个 H5 项目,其中有一个 用 uni-app 原生 swiper 组件写的轮播。

    德顺
  • Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

    最近使用 uni-app 开发的一个 H5 项目,其中有一个 用 uni-app 原生 swiper 组件写的轮播。

    德顺
  • c# dev控件 gridcontrol 数据跟随鼠标滚轮滚动也可以编辑

    如果你设置了 this.gridView3.OptionsBehavior.Editable = false; 那数据可以跟随滚轮滚动,但如果你要复制某个单元格...

    乔达摩@嘿
  • [WPF自定义控件库] 关于ScrollViewr和滚动轮劫持(scroll-wheel-hijack)

    所有代码就这么多,这个ExtendedScrollViewer 只是用来解决滚动轮劫持(scroll-wheel-hijack)的问题。所谓的滚动轮劫持,简单来...

    dino.c
  • Pywinauto之Windows UI自动化8

    上篇文章谈到,使用python的第三方pynput库,进行录制、回放。那么,我们得首先了解下这个pynput库的使用方法。

    用户6367961
  • Python解放双手

    Python 中提供了很多模块可以用于控制输入设备,像是传统的 win32gui,或者是用于游戏开发的 Pygame。其中 win32gui 更贴切的说是基于 ...

    ZackSock
  • 软件分享 | ZoomIt 4.5 演示辅助工具使用教程

    ZoomIt是一款非常实用的投影演示辅助软件。它源自Sysinternals公司,后来此公司被微软收购,因此,有些网友也称ZoomIt为微软放大镜。ZoomIt...

    课代表
  • 随心所欲的滚动条,远离产品汪(二)

    还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

    HTML5学堂
  • 常见网页特效案例

    节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。

    清出于兰
  • VB6对滚轮的支持

            我需要对Mapx控件支持鼠标滚轮,找了一个可以使用的代码,来自         http://blog.csdn.net/areful/arch...

    用户1075292
  • 前端成神之路-WebAPIs06

    回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。

    海仔
  • 问题探讨01: 如何使用鼠标滚轮使单元格中的数值增减?

    问题:前不久,有个网友给我提了个问题要我帮助解决。这个问题是,在某单元格中有一个数字,当鼠标滚轮向上滚动时该单元格中的数字以0.01的间隔增加,向下滚动时以0....

    fanjy
  • 你要悄悄学习3D城市,然后惊艳所有人(1)

    可以搭建3D智慧城市的可视化编辑器有很多,但是要么学习时间太长要么效果不理想,直到我看到了下面的3D城市效果图,赶紧了解了一番后,我打算悄悄学习搭建3D城市,然...

    用户8763535
  • [功能发布]Excel集成网页控件,内嵌于Excel单元格区域,可加载任意网页

    前几天的网页控件短视频推文后,有读者反馈问是什么技术实现的,在此本着开源分享的心态简单介绍下。

    Excel催化剂
  • OpenCV与MFC实战之图像处理 样本采集小工具制作 c++MFC课程设计

    原文链接:https://www.cnblogs.com/DOMLX/p/12111102.html

    徐飞机
  • 《Chrome插件英雄榜》第94篇更新!SmoothScroll让网页滚动如奶油般顺滑的奇妙小工具

    我们使用鼠标滚轮滚动网页时,网页的滚动动画是不连续的,这会让人眼感觉不舒服,我找到了一款好用的小工具,让网页滚动如果奶油般顺滑。

    zhaoolee
  • 网页轮播图案例

    ② 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到 index.js...

    梨涡浅笑

扫码关注云+社区

领取腾讯云代金券