1.0.0 • Published 4 years ago
vue-breakpoint-click v1.0.0
vue-breakpoint-click
Responsive click events for VueJS
Installation
npm install vue-breakpoint-click --save
Configuration
Add the directive to vue, I'm using the click
directive ID but you're free to call it whatever you'd like.
import VueBreakpointClick from 'vue-breakpoint-click'
Vue.directive('click', VueBreakpointClick);
Usage
Default breakpoints
{
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
}
###Basic Usage
v-click:[breakpoints].sm.md.lg.xl="callback"
<template>
<a v-click.lg="clicked">Click Me!</a>
</template>
<script>
export default {
methods: {
clicked() {
alert('This will only fire on screens smaller than 1024px');
}
}
}
</script>
###You can also specify your breakpoints manually
<template>
<a v-click:[breakpoints].md="clicked">Click Me!</a>
</template>
<script>
export default {
data() {
return {
breakpoints: {
md: 700,
}
}
},
methods: {
clicked() {
alert('This will only fire on screens smaller than 700px');
}
}
}
</script>
###Different callbacks for different screen sizes
<template>
<a v-click.lg="clicked" v-click.sm="clickedIfSmall">Click Me!</a>
</template>
<script>
export default {
methods: {
clicked() {
alert('This will only fire on screens smaller than 1024px');
},
clickedIfSmall() {
alert('This will only fire on screens smaller than 640px');
}
}
}
</script>
1.0.0
4 years ago