Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "what are the easy-to-use Vue.js libraries". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "what are the easy-to-use Vue.js libraries" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

1.Click Off to Close

Sometimes we need to trigger an event when the user clicks outside of an element. The 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 I use in almost every app I build.

First choice: vue clickaway

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

If you do import separately, remember that instructions need to be exposed under 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)

Imagine I have a complete selection box with a list of li elements (not shown here). The button above triggers my custom selection box item list, and when I click outside that element, it triggers a method to close the option list. This is much better than forcing the user to always click the "X" button in the upper-right corner of the element. We just need to add the following to the button to get this functionality: v-on-clickaway = "closeMethodName".

Note: You should always use vue-clickaway in close methods, not toggle methods. What I mean is that this method of connecting 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, then whenever you click outside the element, whatever you click on opens and closes the element over and over again. This is probably not the outcome you want, so remember to use the close method to prevent this from happening.

2.Toasts (Notification Bar)

First choice: vue toastification

You have a lot of toast and similar notifications to choose from, but I am a big fan of Maronato's vue-toastification. It provides a large number of options to cover most of your boundary situations, and the styling and animation result in an excellent user experience that far exceeds that of other packages.

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

Global usage (in main.js):

import Toast from 'vue-toastification'// Toast stylesimport '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 made it available everywhere in my app by importing it into main.js and then setting the options I wanted to use there, which kept me from having to write the same option properties every time. Vue-toastification has a great online demo where you can see the results for each option attribute, just copy and paste the option you want, like I did above.

/Option 1: Use Toast in component (template)/

Show toast

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

You can change the desired Toast type by simply changing.error to.success,.info,.warning, or you can remove it entirely as the default Toast notification.

Toasts allows you to display messages based on real-time status changes or unforeseen errors, which greatly improves the user experience. Toasts provide better visual indications than modal or ugly cue-boxes, for example, where the user must provide an extra click to close. Users will appreciate you giving them a visual cue that something is wrong and preventing them from staring blankly at the screen waiting for something that will never happen. It is also useful to confirm that the actions they perform are successful.

3.Tables

Preferred: vue-good-table

Tables are an essential part of many Web applications, and choosing the wrong form can cause you endless pain. After trying out the long list of package options, I believe vue-good-table will solve most of your table needs. It's not just a "good-table" for fun. It's really good and offers more options and features than you can handle.

I bind:rows data to a Vuex getter named getOrderHistory in the following case.

Define my columns in local data():

label is the column title displayed, and field is the data I bound in the Vuex getter.

In the above image, I also used some customization options for vue-good-table, such as formatting my date input and output (which allowed me to change a long timestamp provided by the server to something more readable for my users). I also used formatFn to format my prices, calling a separate method I named toLocale, and then I customized the look of each cell by binding tdClass to the class I set in local. Vue-good-tables do have unlimited customizability built in, and they already cover a very wide range of edge cases.

Vue-good-table also works with custom templates, so you can easily inject buttons, selection boxes, or whatever else you like into the cells of the table. 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 tag and add the logic of the second custom template there. Whatever you need, vue-good-table has it all.

4.Date Picker

Vue2-datepicker

Ah, date picker, which is an important part of many applications. The date picker has more options than anything else on this list, but Mengxiong's vue2-datepicker is one that I keep coming back to. It's simple in style, offers a wide selection of dates and date range options, and is packaged in a sleek and user-friendly UI. It even supports localization of i18n languages and date formats.

Note: Although the package name is vue2-datepicker, there should be no problem adding this package (or any of the other packages listed here) to Vue 3.0 applications.

Import in an assembly or view to make it available for use.

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

Here, I'm using the range option, which allows the user to select a date range and bind the date v-model the user enters to a data value called dateRange. Then, vue-good-table (below) sorts the results of my table using dateRange. I also use the event options @clear and @input to trigger methods that reset the table (resetList) or send a server request for table data (searchDate). Vue2-datepicker offers more options and events for your convenience, 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 site that requires a user-rating element (like Amazon or Rotten Tomatoes). Self-creation may seem like a trivial matter, but when you get into the details, star ratings can quickly become more complicated than you expect. If special features are needed, it allows you to use custom SVG shapes and easily customize sizes, spacing and colors.

These options make it easy to bind user-selected rating v-models wherever you want to use them, and you can set ratings to changeable or read-only with a prop.

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

Read here, this article "What are the useful Vue.js libraries" has been introduced, want to master the knowledge points of this article still need to be used by yourself to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.