Key activable spotlight for Vue.js
(initially built for Slidev)
npm i spotlight-vue
Import with:
import Spotlight from 'spotlight-vue';
// Also import styles
import 'spotlight-vue/dist/style.css';
Register the plugin:
Vue.use(Spotlight);
Use it in your Vue.js
app with:
<spotlight/>
In your app, maintain the Shift key pressed and the spotlight should appear.
-
activationKey
(type:string
, default:'Shift'
): The key to hold down to activate the spotlight -
active
(type;boolean
): Activate manually the spotlight -
color
(type:string
, default:'black'
): CSS color of the spotlight shadow -
opacity
(type:number | string
, default:0.75
): Opacity of the spotlight shadow -
size
(type:string
, default:100px
): Size of the spotlight -
transitionDuration
(type:string
, default:200ms
): CSS transition durations -
x
(type;number
): Set manually the spotlight X position -
y
(type;number
): Set manually the spotlight Y position
-
activate
: Fired when component is activated -
deactivate
: Fired when component is deactivated -
update
: Fired when component is active and position is updated
All three events also send a position object with the following shape:
-
x
(type:number
): X position in percentage of the container -
y
(type:number
): Y position in percentage of the container