John Au-YeungSubscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages for handling outside clicks, tabs, and date pickers.
v-click-outside-x
v-click-outside-x is a directive that lets us handle clicks outside an element easily.
To install it, we run:
npm i v-click-outside-x
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import * as vClickOutside from "v-click-outside-x";
Vue.use(vClickOutside);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div v-click-outside="onClickOutside">click me</div>
</template>
<script>
export default {
methods: {
onClickOutside(event) {
console.log("Clicked outside. Event: ", event);
}
}
};
</script>
We have a div that we add the v-click-outside directive to.
And we pass an event handler function to it for handling clicks outside the element.
event is the event object that we use when clicking outside.
We can also use it to handle multiple events.
For instance, we can write:
<template>
<div
v-click-outside.capture="onClickOutside"
v-click-outside:click="onClickOutside"
v-click-outside:pointerdown.capture="onClickOutside"
>click me</div>
</template>
<script>
export default {
methods: {
onClickOutside(event) {
console.log("Clicked outside. Event: ", event);
}
}
};
</script>
vue-tmn-tabs
vue-tmn-tabs is a simple tabs component.
To install it, we can run:
npm i vue-tmn-tabs
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { Tab, Tabs } from "vue-tmn-tabs";
Vue.component("tab", Tab);
Vue.component("tabs", Tabs);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<tabs transitionName="fade">
<tab :title="'Tab1'">
<h1>Tab 1</h1>
<p>foo</p>
</tab>
<tab :title="'Tab2'">
<h1>Tab 2</h1>
<p>bar</p>
</tab>
<tab :title="'Tab3'">
<h1>Tab 3</h1>
<p>baz</p>
</tab>
<tab :title="'Tab4'">
<h1>Tab 4</h1>
<p>qu</p>
</tab>
</tabs>
</div>
</template>
<script>
export default {};
</script>
We have the tabs component to add the tabs.
title is the title for the tabs, which are displayed in the tab buttons.
tab has the tab content.
We can add styling to the generated classes.
vue2-datepicker
vue2-datepicker is a date picker that is very customizable.
To use it, we install it by running:
npm i vue2-datepicker
Then we can use it by writing:
<template>
<div>
<date-picker v-model="time" valuetype="format"></date-picker>
<p>{{time}}</p>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
We import the component and CSS.
Then we use the date-picker component to display the items.
v-model is bound to the time state.
valuetype specifies the format of the selected value.
The possible values include date , timestamp , format , and token .
So we can also write:
<template>
<div>
<date-picker v-model="time" type="datetime"></date-picker>
<p>{{time}}</p>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
to add a time picker.
Or we can write:
<template>
<div>
<date-picker v-model="time" range></date-picker>
<p>{{time}}</p>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
to let us select a start and end date with one date picker.
It also supports theming and styling.
It has slots to display anything we want like changing the icons, input, header, or footer.
vue-click-outside
vue-click-outside is another Vue plugin that lets us handle clicks outside an element.
To install it, we run:
npm i vue-click-outside
Then we can use it by writing:
<template>
<div>
<div v-click-outside="hide" @click="toggle">Toggle</div>
<div v-show="opened">Popup</div>
</div>
</template>
<script>
import ClickOutside from "vue-click-outside";
export default {
data() {
return {
opened: false
};
},
directives: {
ClickOutside
},
methods: {
toggle() {
this.opened = true;
},
hide() {
this.opened = false;
}
}
};
</script>
We have a div that toggles a pop-up item on and off.
The click listener toggles the pop up on and it’ll be off when we click outside it.
Conclusion
v-click-outside and v-click-outside are plugins that let us handle clicks outside an element.
vue2-datepicker lets us add a date picker that’s very customizable.
vue-tmn-tabs lets us add tabs to a page.
The post Top Vue Packages for Handling Outside Clicks and Add Tabs and Date Pickers appeared first on The Web Dev.
