基于我们的自定义指令, 我们可以创建和修改方法, 从而创建更为复杂的自定义指令. 这里, 我们将做一个waypoints-like例子, 用少量的代码实现特定滚动事件触发的动画效果(在CODEPEN上查看):
// JS Vue.directive('scroll', { inserted: function(el, binding) { let f = function(evt) { if(binding.value(evt, el)) { window.removeEventListener('scroll', f); } }; window.addEventListener('scroll', f); } }); // main app new Vue({ el: "#app", methods: { handleScroll: function(evt, el) { if(window.scrollY > 50) { TweenMax.to(el, 1.5, { y: -10, opacity: 1, ease: Sine.easeOut }); } return window.scrollY > 100; } } }); // HTML <div v-scroll="handleScroll"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p> </div>
为了让大家看得更清楚, 在这个代码片段中, 我们尽可能的保证它的简单易读. 在实际的APP中, 你可以构建非常友好的, 并且非常灵活的, 适合整个团队使用的自定义指令.
在实际的构建中, 我会将指令代码放在"main.js"文件中, 该文件位于"src"目录的根目录下(如果你使用的是Vue-cli构建工具), 那么"App.vue"以及组件目录中的所有的.vue文件都可以访问它. 当然, 还要其他方法可以使用它, 但是我发现对于整个应用程序来说, 这是最灵活的实现方式.
以上就是个人对Vue自定义指令的理解，希望对大家有所帮助
您可能感兴趣的文章: