关于vue中禁止滑动

最新推荐文章于 2024-06-12 11:11:04 发布
最新推荐文章于 2024-06-12 11:11:04 发布
阅读量3k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WanghaoDyj/article/details/84821092
版权

<div class="overlayer" @touchmove.prevent > </div>

在需要禁止的元素添加 @touchmove.prevent  就可以禁止该元素滑动了

@click.prevent  阻止元素的默认事件

@dblclick   双击事件

@input  事件

后续有其他小知识点会添加到这篇文章

WanghaoDyj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element 下拉框 el-select 自定义控制某项禁止选择
xiaosi1413的博客
10-21 1万+
vue element 下拉框 el-select 自定义控制某项 el-option 禁止选择 驾驶员，押运员不能同时选择同一个人 例如：驾驶员选择 张三 押运员禁止选张三 如果押运员选张三 驾驶员禁止选 HTML 押运员 <el-select v-model="escortName" filterable placeholder="请选择押运员" :disabled="escortS
vue语法阻止内部内容滚动
咖喱鸡块的博客
03-31 3456
{{item}} import myButton from './components/myButton.vue' export default { data () { return { list : [1,2,3,4,5,6,7,8,9,10]
在Vue中禁止页面滚动条的CSS和JavaScript实现
最新发布
qls5945的博客
06-12 650
Vue中禁止页面滚动条的CSS和JavaScript实现方法
在vue中实现禁止屏幕滚动,禁止屏幕滑动
故里的博客
10-14 5987
1.需求：当如图弹框的内容滚动/滑动时，遮罩层后边的内容静止不动。 2.代码 <div v-show="isShow" @touchmove.prevent @mousewheel.prevent> </div> 这个div是遮罩组件的根组件，核心就是div上的事件绑定。 @touchmove 是触摸移动事件 @mousewheel 是鼠标滚轮事件 而加了prevent事件后缀，是阻止默认事件。 ...
uni-app禁止在popup组件中的内容滑动/滚动时触发遮罩层下面的页面滚动
lingliu0824的博客
02-24 3909
解决： 在popup组件的父组件中添加@touchmove.prevent 注意不是在popup组件中添加，而是在其父组件中添加
easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法
weixin_34101784的博客
04-13 327
easyUI slider滑块禁用 如下图easyUI slider滑块，在加载出来后，需要禁止拉动   easyUI slider滑块禁用方法   //禁用$(s1).slider({ disabled:true });//更改默认样式 .slider-disabled { opacity: 1; filter: alpha(opacity=100); } ...
关于jqweui组件——Slider，无法拖拽滑动的问题
Eleven_W的博客
06-17 1284
jqweui文档地址：http://jqweui.com/components#slider 代码拿来使用后，出现了滑块无法拖动的问题。原因是官方文档js代码里，对于slider控件的id写错了，修改一致后可正常使用。 2020-6-17 官方文档截图​ <div class="weui-slider-box" id="slider1"> <div class="weui-slider"> <div id="sliderInner" class="weui
Vue如何阻止鼠标的滚动事件
qq_47452289的博客
01-18 1796
Vue如何阻止鼠标的滚动事件 preventMove（）{ let flag=true if (flag) { // 阻止滚轮滚动 document.addEventListener('mousewheel', this.hander, false) } // 取消滚轮禁止滚动 else { document.removeEventListener('mousewheel', this.hander, false)
css实现元素禁止拖拽
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
12-15 436
【代码】css实现元素禁止拖拽。
vue禁止鼠标滚轮事件（禁止弹窗后面的遮罩层下的背景滚动）
朽木自雕的博客
07-22 1725
vue禁止鼠标滚轮事件（禁止弹窗后面的遮罩层下的背景滚动）代码如下 代码如下 原理： 监听visible的变化，然后通过禁止、解除鼠标滚轮事件来禁止背景滚动 <<template> <div class="dialog-wrapper" v-show="visible" @click.self="close"> <div class="dialog target"> <slot></slot> </div&
UISlider禁止Thumb拖动及滑块大小的改变
王大卓的专栏
12-06 5830
一、有时候只是想简单的显示播放进度，不想让Slider可以拖动，做法其实很简单，只用一下两步就可以了： 1、建立一个继承自UISlider的子类。 2、在新建的子类中添加下面这个方法： - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { return NO; } 以上方法可以禁止slider的拖动，如果想...
扩展cocos slider控件，支持禁用置灰
随风的博客
10-15 302
扩展cocos slider控件，支持禁用置灰
vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏 、播放进度，话不多说直接上代码。
Lsir1998的博客
06-20 1850
vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏 、播放进度，话不多说直接上代码。
基于element-ui el-slider实现滑动限位器
qq_34672907的博客
04-29 4989
应需求需要，要做一个滑动限位器，一通百度，一通谷歌，没有相对应的解决方案，所以只能自己上。过程有丢丢曲折，比较细的东西。所以耗时也长写。写出来有需要的可以参考 需求图如下： 上面的滑块是可以在区间【50-100】之间随意切换的。左边和右边也是可以随意拉动，区间可以随意变动，上面的滑块也可以跟着区间的范围不停的在变动。当然，也是有限制的，我这边的限制是30-150。 需求拿到手，那就是开始开工了。 看了看element-ui没有现成的，只能自己用css组合啦。 废话就少说了，上代码 html模
【前端】vue-slider实现可设置选择范围的时间轴
洛尧的博客
11-23 4413
一开始用的el-slider，提了这个需求以后开始查文档改，到最后发现，element的slider居然可以样式和绑定的value不一致。最后看到了vue-slider的范围模式，实现了设置不可选范围，将时间轴分两段。加cursor: auto;屏蔽固定滑块的cursor:not-allowed，不显示禁止符号。截图截不到第二个滑块上大大的 cursor: not-allowed 标志。绝不会超过设定值，使用键盘左右键也不会超过，点图标右回到1。
网易云项目播放组件中的进度条拖动bug（elementUI）
levier007的博客
04-01 2867
slider通过点击可定位到相应的位置（或者特别快速的拖动，快速拖动个人认为slider组件应该是利用了mousedown和mouseup并结合定时器从而实现拖拽效果，当特别快速的拖动时，只要没有达到定时器设定的时间间隔，故和鼠标点击是相同效果），但是在用鼠标拖拽进度条时会失败（超过一定时间），进度条会回弹到之前时间点附近，达不到那种可以滑动转到指定区域的功能。
el-dialog拖拽实现及拖拽过程部分区域无法拖拽，全屏情况位置不对的问题及解决方法（通用版本）
weixin_44295184的博客
10-10 1490
el-dialog拖拽实现及拖拽过程部分区域无法拖拽，全屏情况位置不对的问题及解决方法（通用版本）
element-ui 时间选择器限制范围的实现（随动）
weixin_43660626的博客
06-06 907
第一个时间前后一个月外的日期禁用 data() { let _maxDate=null; let _minDate=null; return { performanceStatisticsTime:"", pickerOptions:{ onPick:({maxDate,minDate})=>{ _maxDate...
vue panzoom 内容小于视口禁止滑动
05-30
要实现这个功能，你需要在panzoom组件中监听内容的大小，然后根据内容的大小来判断是否禁止滑动。具体实现可以参考以下步骤： 1.在panzoom组件中添加一个ref属性，用于获取panzoom的容器元素。 2.在mounted生命周期中，使用ref获取容器元素，并监听其大小变化。 3.在监听函数中，获取容器元素的大小，判断容器元素的高度和宽度是否小于视口的高度和宽度，如果是，则禁止滑动，否则解除禁止滑动。 以下是一个简单的示例代码： ```html <template> <div ref="container"> <div ref="content"> <!-- panzoom内容 --> </div> </div> </template> <script> import panzoom from 'vue-panzoom' export default { components: { panzoom }, mounted() { const container = this.$refs.container const content = this.$refs.content const observer = new ResizeObserver(() => { const containerWidth = container.offsetWidth const containerHeight = container.offsetHeight const contentWidth = content.offsetWidth const contentHeight = content.offsetHeight if (containerWidth >= contentWidth && containerHeight >= contentHeight) { //禁止滑动 this.$refs.panzoom.disable() } else { //解除禁止滑动 this.$refs.panzoom.enable() } }) observer.observe(container) }, } </script> ``` 在上面的代码中，我们使用了ResizeObserver来监听容器元素的大小变化，在监听函数中判断容器元素的大小是否小于视口的大小，然后调用panzoom组件的disable和enable方法来禁止和解除禁止滑动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值