Recommended 5 very good Vue .js libraries

Some libraries that have been in programming for so long, more or less used. 5 good Vue .js libraries are recommended today

1.Click Off to Close

Sometimes we need to trigger an event when the user clicks outside the element. T he most common use case is when you want to close a drop-down box or dialog box by clicking. This is an essential package that is used in almost every application I build.

Preferred: vue-clickaway

I usually install it in main .js for use in my application. If you use it only on one or two pages, you may want to import it separately.

If you do import separately, keep in mind that instructions need to be exposed under the instructions.

✅ directives: { onClickaway }

Instead of components:

❌ components: { onClickaway }

Make it globally available (in main .js):

import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)

In the template:

Imagine that I have a complete selection box with a list of li elements (not shown here). T he button above triggers my custom selection box item list, and when I click outside the element, it triggers a way to close the list of options. T his is much better than forcing the user to always click the "X" button in the upper right corner of the element. All we need to do is add the following to the button to get this feature: v-on-clickaway s "closeMethodName".

Note: You should always use vue-clickaway in the close method, not the toggle method. I mean this method connected to v-on-clickaway should look like this:

closeMethod() {
  this.showSomething = false
}

Instead of this:

toggleMethod() {
  this.showSomething = !this.showSomething
}

If you use the toggle method, it opens whenever you click outside the element, whatever you click, and then closes the element over and over again. This is probably not the result you want, so remember to use the close method to prevent this from happening.

2.Toasts (Notification Bar)

Preferred: vue-toastification

You have a lot of toast and similar notification options, but I'm a big fan of Maronato vue-toastification It offers a number of options to cover most of your boundary situations, and styles and animations result in a great user experience that far exceeds that of other packages.

Vue-toastification provides several ways to use it in its documentation. You can do this at the component level, at the global level, even within Vuex if you want to display toasts based on status or server-related actions.

Global use (in main .js):

import Toast from 'vue-toastification'
// Toast styles
import 'vue-toastification/dist/index.css'
Vue.use(Toast, {
  transition: 'Vue-Toastification__bounce',
  maxToasts: 3,
  newestOnTop: true,
  position: 'top-right',
  timeout: 2000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: false,
  draggable: true,
  draggablePercent: 0.7,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: 'button',
  icon: true,
  rtl: false
})

You can control styles individually in each component, but in the case above, I .js by importing it into main and then setting the options I want to use there to make it available everywhere in my application, which eliminates the need to write the same option properties every time. Vue-toastification has a good online demo where you can see the results of each option property, just copy and paste the option you want, as I did above.

/ Option 1: Use Toast / in components (templates)

<button @click="showToast">Show toast</button> 

/ Option 2: Call Toast when an error (or success) is found in Vuex action /

Simply change .error to .success, .info, .warning to change the type of toast you want, or you can delete it completely as the default toast notification.

Toasts allows you to display messages based on changes in real-time state or unforeseen errors, which greatly improves the user experience. T oasts provide better visual indications than modal or ugly prompt boxes, for example, the user must provide an additional click to close. U sers will appreciate you giving them a visual cue to let them know what's wrong and prevent them from staring at the screen and waiting for something that will never happen. It is also useful to verify that the operation they performed was successfully completed.

3.Tables

Preferred: vue-good-table

Tables are an important part of many Web applications, and choosing the wrong table can cause you endless pain. A fter trying out a long list of package options, I'm sure vue-good-table will solve most of your table needs. I t's not just for fun it's called good-table. It's really good, offering more options and features than you can do.

In the following cases, I bind the rows data to a Vuex getter named getOrderHistory.

Define my column in local data():

Label is the column title that is displayed, and field is the data that I bind in Vuex getter

In the image above, I also used some customization options vue-good-table such as formatting the input and output of my date (which allowed me to change a long timestamp provided by the server to something easier for my users to read). I also used formatFn to format my price, called a separate method I named toLocale, and then I customized the appearance of each cell by binding tdClass to the class I set in the local <style >. Vue-good-table does have built-in untold customization, and they've covered a very wide range of edge cases.

Vue-good-table can also be used with custom templates, so you can easily inject buttons, selection boxes, or anything else you like into the table's cells. To do this, you simply use v-if to define where it should be injected.

To add another custom column, simply add a v-else-if (a span in the example above) after your v-if label, and then add the logic of the second custom template there. Whatever you need, vue-good-table has you covered.

4.Date Picker

Preferred: vue2-datepicker

Ah, date selector, which is an important part of many applications. I n this list, the date selector has more choices than anything else, but Mengxiong vue2-datepicker is one of my constant regressions. I t has a simple style, offers a wide selection of date and date range options and is packaged in a smooth and user-friendly UI. It even supports localization of i18n languages and date formats.

Note: Although the package is named vue2-datepicker there should be no problem adding this package (or other packages listed here) to the Vue 3.0 application.

Import in a component or view so that it can be used.

import DatePicker from 'vue2-datepicker';
// styles
import 'vue2-datepicker/index.css';

In the template:

Here, I'm using the range option, which allows the user to select a date range and bind the date v-model entered by the user to a data value named dateRange. V ue-good-table then uses dateRange to sort the results of my table. I also use the event options @clear and @input to trigger a reset table (resetList) or send a server request table data (searchDate) method. Vue2-datepicker offers more options and events to make your use easier, but these are the ones I find myself using most often.

5.User Ratings

Preferred: vue-star-rating

While you may not use this feature in every project, vue-star-rating is my first choice for any website that requires user rating elements, such as Amazon or Rotten Tomatoes. C reating your own may seem trivial, but when you get into the details, star ratings can quickly become more complex than you might expect. If you need special features, it lets you use custom SVG shapes and makes it easy to customize size, spacing, and colors.

With these options, you can easily bind a user-selected rating v-model to anywhere you want to use it, and you can set the rating to changeable or read-only through a prop.

If you find that you need more options, check out the creator's extended package vue-rate-it.

In the template (with options):

Import it into a component or view:

Source: www.toutiao.com/a6865327554656469508/ Author: Xiao Zhang, Programmer, Hangzhou

The above is W3Cschool编程狮 about recommending 5 very good Vue .js library related to the introduction, I hope to help you.