Categories
Top Vue Packages

Top Vue Packages for Handling Outside Clicks and Add Tabs and Date Pickers

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.