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事件一起使用。

View demo 查看演示 Download Source 下载源

:white_check_mark: On	:x: Off

：white_check_mark：开	：x：关

安装 (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停止指令