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 |
---|---|
|
: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停止指令