Wechat search [front-end full stack developers] pay attention to this hair loss, stall, sell goods, continue to learn programmers, the first time to read the latest articles, will give priority to two days published new articles. Pay attention to the gift package, you can save a lot of money!

1.Click Off to Close

Sometimes we need to fire an event when the user clicks on something other than an element. The most common use case is when you want to close a drop-down or dialog box with a click. This is an essential package that is used in almost every application I build.

Picks: vue – clickaway

I usually install it in main.js for use in my applications. If you only use it on one or two pages, you may 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)
Copy the code

In the template:

Imagine that I have a complete selection box with a list of LI elements (not shown here). The button above is used to trigger my list of custom select box items, and when I click outside that element, it triggers a method that closes the list of options. This is much better than forcing the user to always click the “X” button in the upper right corner of the element. To get this, simply add the following to the button: V-on-ClickAway = “closeMethodName”.

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

closeMethod() {
  this.showSomething = false
}
Copy the code

Instead of this:

toggleMethod() {
  this.showSomething = !this.showSomething
}
Copy the code

If you use the toggle method, every time you click outside the element, whatever you click on will open, and then close the element over and over again. This is probably not what you want, so remember to use the close method to prevent this from happening.

2.Toasts (Notification Bar)

Picks: vue – toastification

You have plenty of options for toast and similar notifications, but I’m a big fan of Maronato’s Vue-Toastification. It provides a large number of options to cover most of your boundary cases, and the styling and animations result in an excellent user experience that is far superior to other packages.

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

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
})
Copy the code

You can control styles individually in each component, but in the case above, I made it available everywhere in my application 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 nice online presentation where you can see the results of each option property, just copy and paste the options you want, just like I did above.

Option 1: Use Toast in the component (template)

<button @click="showToast">Show toast</button> 
Copy the code

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

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

Toasts allow you to display messages based on changes in real-time status or unforeseen errors, which greatly improves the user experience. Toasts provide better visual indications than modal or ugly prompt boxes, for example, where the user must provide an extra click to close. Users will appreciate a visual cue to let them know what’s wrong and prevent them from staring blankly at the screen waiting for something that will never happen. It is also useful to verify that the actions they performed completed successfully.

3.Tables

Picks: vue – good – table

Tables are an important part of many Web applications, and choosing the wrong table can lead to endless misery. After trying out a very long list of package options, I’m sure Vue-good-table will solve most of your table needs. It’s not just for fun it’s called “good-table.” It’s really good and offers more choices and features than you can afford.

In the following case, I bind the: Rows data to the 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 the Vuex getter.

In the figure above, I also used some custom options from Vue-good-table, such as setting the input and output formats for my dates (which allowed me to change a long timestamp provided by the server into something more readable to my users). I also use formatFn to format my prices, calling a separate method I named toLocale, and then I customize the appearance of each cell by binding the tdClass to the class I set in local

Vue-good table can also be used with custom templates, so you can easily inject buttons, select boxes, or anything 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 above example) after your V-if tag, and then add the logic for the second custom template there. Whatever you need, Vue-good-table has it for you.

4.Date Picker

Picks: vue2 – datepicker

Ah, date pickers, an important part of many applications. There are more options for date pickers than anything else on this list, but Mengxiong’s Vue2-Datepicker is one I keep coming back to. It is simple in style, offers a wide range of options to select dates and date ranges, and is wrapped in a smooth and user-friendly UI. It even supports localization of the I18N language and date format.

** Note: ** Despite the package name vue2-Datepicker, there should be no problem adding this package (or any of the other packages listed here) to a Vue 3.0 application.

Import into a component or view to make it usable.

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

In the template:

Here, I’m using the range option, which allows the user to select a dateRange and bind the user-entered date v-model with a data value called dateRange. Vue-good-table (below) then uses dateRange to sort the results of my table. I also used the event options @Clear and @Input to trigger methods that reset the table (resetList) or send the server request table data (searchDate). Vue2-datepicker offers more options and events to make it easier for you to use, but these are the ones I find myself using most often.

5.User Ratings

Picks: vue – star – rating

While you probably won’t use this feature for every project, vue-star-rating is my top choice for any site that requires a user rating element (such as Amazon or Rotten Tomatoes). Creating your own may seem like a trivial thing, but when you get down to the details, star ratings quickly become more complicated than you anticipated. If you need special features, it lets you use custom SVG shapes and can easily customize sizes, spacing and colors.

With these options, you can easily bind the user-selected rating V-Model to wherever you want to use it, and you can set the rating to be modifiable or read-only with a prop.

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

In the template (with options) :

Import it into a component or view:

Original text: medium.com/better-prog… By Titus Decali

Open Source Recommended Series

  • Open source recommended | 10 amazing CSS suite of restoring ancient ways
  • Open source recommended | Vue. Js shuffling hot selected library
  • Open source recommended | 19 front-end developer survival tool
  • Open source recommended | 10 + a cool Vue. Js components, templates and demo sample
  • Open source recommended | JSONsite: using JSON file creation SPA page
  • Open source recommended | using GPU. Js JavaScript performance
  • Open source recommended | how to convert the HTML form into elegant PDF, several schemes comparison
  • Open source recommended | I can not live without the five Vue. Js library
  • Open source recommended | 8 JavaScript library can better deal with the local store
  • Open source recommended | Node development artifact: use the Llama Node error Logs real-time visualization
  • Open source recommended | you should know about 23 very useful NodeJS library
  • Open source recommended | 10 beautiful VSCode Light color (Light)
  • Open source recommended | 2019 six JavaScript library user authentication
  • Open source recommended | UI library which support dark pattern?
  • Open source recommended | 5 you don’t know JavaScript string processing library
  • Open source recommended | 9 CSS tools for Web developers
  • Open source recommended | in addition to ali iconfont icon library, and the 10 open source SVG icon library
  • 7 great JavaScript product step bootstrap libraries that you don’t need