spyfu-vue-utils
Utility functions for Vue components.
Installation
The recommended way to install these utility functions is through a Yarn or NPM.
$ yarn add spyfu-vue-utils # or $ npm install spyfu-vue-utils
Plugin API
In addition to importing these utilities directly, they can made available to all Vue instances by installing them as a plugin.
;; Vue;
This attaches the utilities to the Vue prototype as $bindExternalEvent
, $interval
, and $timeout
. The API for these functions remains the same, with the exception of not having to provide a this
context as the first argument. As an example, here is bindExternalEvent
being used to listen for a body click event.
{ this; } methods: { // ... } ;
bindExternalEvent
Binds a listener to something outside the scope of a component. This listener will be cleaned up when the component is destroyed. In this example, we'll bind a listener to the window scroll event. To manually stop listening for an event, call the returned unbind
function.
; { ; } methods: { // ... } ;
componentEase
This utility fires a function along an easing curve. It is useful when transitioning state.
; { const duration = 1000; const easeInOutQuart = 077 0 0175 1; // optional, this is the default const steps = 0; // optional, calculates to 60fps if zero // queue timeouts const timeouts = ; // cancel execution timeouts; } methods: { // ... } ;
componentInterval
Executes a function at a given interval. The interval will be terminated when the component is destroyed, or when the returned cancel
function is called.
; { const interval = ; // our tick function will be called every 100ms, until the component is destroyed. // for demo purposes though, we'll manually stop ticking after 5 seconds. ; } methods: { // ... } ;
componentTimeout
Executes a function after a specified amount of time. The queued function will not be executed if the component is destroyed before before the given timeout, or when the returned cancel
function is called.
; { const timeout = ; // our fire function will be called after 5 seconds, so long as the component instance // is still alive. for demo purposes though, we'll cancel the timeout after 2 seconds. ; } methods: { // ... } ;
functionalComponent
Wraps a plain render function as a functional component object. This can be useful when storing multiple components in a single file.
Note: Because this utility exists for use with functional components, it is not exposed via the plugin API.
; const component = ; component;
License
Copyright (c) 2019-present, SpyFu