vue停止指令_一个微小的Vue指令,当到达边缘时停止传播滚动

vue停止指令

停止滚动 (vue-scroll-stop)

A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events.

一个微小的Vue指令,当到达边缘时停止传播滚动。 与桌面鼠标滚轮和移动touchmove事件一起使用。

:white_check_mark: On:x: Off
vue-scroll-stop-on
:white_check_mark:开 :x:关
Vue滚动停止

安装 (Installation)

npm i --save vue-scroll-stop

进口 (Import)

In main.js:

在main.js中:

import Vue from 'vue'
import VueScrollStop from 'vue-scroll-stop'
import App from './App.vue'
 
Vue.use(VueScrollStop)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

浏览器 (Browser)

Include the script file, then install the component with Vue.use(VueScrollStop); e.g.:

包括脚本文件,然后使用Vue.use(VueScrollStop);安装组件Vue.use(VueScrollStop); 例如:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-scroll-stop/dist/vue-scroll-stop.min.js"></script>
<script type="text/javascript">
  Vue.use(VueScrollStop);
</script>

用法 (Usage)

Once installed, it can be used in a template as simply:

安装后,可以简单地在模板中使用它:

<div v-scroll-stop></div>

By default directive works on both direction but you can strict it by using modifier v (vertical) or h (horizontal)

默认情况下,指令在两个方向上均有效,但您可以通过使用修饰符v(垂直)或h(水平)来对其进行严格控制

<div v-scroll-stop.h></div>  <!-- Works only for horizontal scroll -->

You can pass false as value to disable directive reactive

您可以将false作为值传递来禁用指令React

<div v-scroll-stop.h="false"></div> <!-- Directive disabled -->

翻译自: https://vuejsexamples.com/a-tiny-vue-directive-that-stop-propagation-scroll-when-edge-reached/

vue停止指令

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值