vue.js库_我不能没有的5个Vue.js库-CSDN博客

vue.js库

As experienced developers know, sometimes using another person’s package to solve a feature of your app ends up costing you more time than it saves. Opinionated systems and a lack of edge-case solutions often bury us in a hole that makes us regret ever installing it in the first place.

正如经验丰富的开发人员所知道的那样，有时使用别人的软件包来解决应用程序的功能最终会花费您更多的时间，而不是节省的时间。固执己见的系统和缺乏先进案例的解决方案常常使我们陷入困境，这使我们后悔一开始就安装它。

While I’ve also had this experience many times, there are a few packages that I rely on for many projects and that have proven highly useful over the long haul. After testing a variety of options for each of the problems these packages solve, I’ve listed below my personal selections based on ease of use, diversity of features, and visual appeal.

虽然我也有很多经验，但是我在许多项目中都依赖一些软件包，并且从长期来看，这些软件包被证明是非常有用的。在针对这些软件包所解决的每个问题测试了各种选项之后，下面根据易用性，功能的多样性和视觉吸引力列出了我的个人选择。

单击关闭以关闭 (Click Off to Close)

There are times when we need to trigger an event when a user clicks outside of an element. The most common use case of this is when you want to close a dropdown or dialogue box by clicking away from it. This is an essential package that I use in almost every app I build.

有时，当用户在某个元素之外单击时，我们需要触发事件。最常见的用例是您要通过单击关闭下拉列表或对话框来关闭它。这是我在几乎所有构建的应用程序中都使用的基本软件包。

Top pick: vue-clickaway

用法 (Usage)

I usually install this in main.js to make it usable across my app. If you’re only using it on one or two pages, you’ll likely want to import it individually.

我通常将其安装在main.js ，以使其可在我的应用程序中使用。如果只在一页或两页上使用它，则可能需要单独导入。

If you do import it individually, remember that directives need to be exposed under directives:✅ directives: { onClickaway }

如果您确实要单独导入，请记住该指令需要在以下指令下公开：✅ directives: { onClickaway }

and not components: ❌ components: { onClickaway }

而非组件：❌ components: { onClickaway }

Make it available globally (in main.js):

使其全局可用(在main.js )：

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

In template:

在模板中：

Image for post — *A partial look at the code to keep things simple. *部分看一下代码以使事情简单。

Imagine that I’ve got a full select box including a list of li elements (not shown here). The above button is used to trigger my list of custom select box items, and when I click outside of that element, I’m triggering a method that closes the list of options. This is a much better UX than forcing your user to always click a “close X” button at the corner of your element. We can get this functionality simply by adding the following to our button:v-on-clickaway=“closeMethodName”.

想象一下，我有一个完整的选择框，其中包含li元素列表(此处未显示)。上面的按钮用于触发我的自定义选择框项目列表，当我在该元素之外单击时，会触发一种关闭选项列表的方法。这比强迫用户始终单击元素角处的“关闭X”按钮要好得多。我们只需将以下内容添加到按钮即可获得此功能： v-on-clickaway=“closeMethodName” 。

Note: You should always use vue-clickaway with a close method and not a toggle method. What I mean by that is that the method connected to the v-on-clickaway should be something like this:

注意：应始终将vue-clickaway与close方法一起使用，而不应将其与toggle方法一起使用。我的意思是，连接到v-on-clickaway应该是这样的：

closeMethod() {
 this.showSomething = false
}

and not like this:

而不是这样：

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

If you use a toggle method, then whenever you click outside that element, it will open and then close the element over and over again, no matter what you click on. This is most likely not the result you’ll want, so just remember to use a close method to prevent this from happening.

如果使用toggle方法，则无论您单击什么，只要您在该元素外部单击，它都会一次又一次打开然后关闭该元素。这很可能不是您想要的结果，因此请记住使用close方法来防止这种情况的发生。

吐司(通知栏) (Toasts (Notification Bar))

Top pick: vue-toastification

用法 (Usage)

Vue-toastification gives you a few ways to use it in their docs. You can do it at the component level, the global level, or even within Vuex if you prefer to display toasts based on state- or server-related actions.

Vue-toastification提供了几种在其文档中使用它的方法。如果您希望根据状态或与服务器相关的动作显示吐司，则可以在组件级别，全局级别甚至在Vuex内执行此操作。

Use globally (in main.js):

全局使用(在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 separately in each component, but in the above case, I’m making it available everywhere in my app by importing it into main.js, then setting the options I want to use there. This saves me from writing the same option props each time I want to use it. Vue-toastification has a great playground where you can see the results of each option prop and just copy and paste the options you want, as I have done above.

您可以在每个组件中分别控制样式，但是在上述情况下，我将其导入main.js ，然后在其中设置要使用的选项，从而使其在我的应用程序中随处可见。这使我不必每次都使用相同的选项道具。 Vue-toastification有一个很棒的游乐场，您可以在其中看到每个option道具的结果，并且只需复制和粘贴所需的选项即可，就像我上面所做的那样。

Option 1: Using toasts in a component (template)

选项1：在组件(模板)中使用Toast

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

Option 2: Calling a toast when an error (or success) is caught in a Vuex action

选项2：在Vuex动作中发现错误(或成功)时调用吐司

You can change the type of toast you want simply by changing the word .error to .success, .info, .warning, or you can remove it altogether for a default toast notification.

您只需将.error更改为.success ， .info ， .warning即可更改所需的吐司类型，也可以将其完全删除以作为default吐司通知。

Toasts enable you to show messages based on live state changes or when an unforeseen error has occurred, which greatly improves your user’s experience. Toasts provide a better visual indication than modals or ugly alert boxes, for example, where a user would have to provide an additional click to close. Users will appreciate that you’ve given them a visual hint as to what has gone wrong, preventing them from staring at a screen blankly waiting for something to happen that never comes. It’s also useful to confirm that an action they performed was successfully completed.

借助Toast，您可以根据实时状态更改或发生意外错误时显示消息，从而极大地改善了用户的体验。例如，与用户必须提供额外的点击才能关闭的方式或丑陋的警告框相比，吐司提供了更好的视觉指示。用户会欣赏到您为他们提供了发生问题的直观提示，从而防止他们呆呆地盯着屏幕等待着永远不会发生的事情。确认他们执行的操作已成功完成也很有用。

桌子 (Tables)

Top pick: vue-good-table

用法 (Usage)

In the case below, I’m binding my :rows data to a Vuex getter called getOrderHistory.

在以下情况下，我将:rows数据绑定到名为getOrderHistory的Vuex getter。

Defining my columns in local data():

在本地data()定义我的列：

label is the displayed column title, while field is the data I’m binding to in my Vuex getter.

label是显示的列标题，而field是我在Vuex getter中绑定的数据。

In the above, I’m also using some of the customization options of vue-good-table, like setting the input and output format of my dates (which allows me to take a long time stamp provided by the server and change it into something more readable for my users). I’m also using formatFn to format my price, calling a separate method I’ve named toLocale. Then I’m customizing how each cell looks by binding tdClass to a class I’ve set in my local<style>. Vue-good-table really has endless customizability built in, and they’ve covered a very wide range of edge cases.

在上面，我还使用了vue-good-table的一些自定义选项，例如设置日期的输入和输出格式(这使我可以获取服务器提供的很长的时间戳并将其更改为某种形式对我的用户更具可读性)。我还使用formatFn格式化价格，调用了一个名为toLocale的单独方法。然后，通过将tdClass绑定到我在本地<style>设置的类，来自定义每个单元格的外观。 Vue-good-table确实内置了无限的可定制性，并且它们涵盖了非常广泛的边缘案例。

自定义模板 (Custom templates)

Vue-good-table also works great with custom templates so that you can easily inject a button, a select box, or anything else you fancy right into your table’s cells. To do that, you simply use a v-if to define where it should be injected.

Vue-good-table还可以与自定义模板配合使用，因此您可以轻松地将按钮，选择框或您喜欢的其他任何东西插入表的单元格中。为此，您只需使用v-if定义应将其注入的位置。

To add another custom column, just add a v-else-if after your closing v-if tag (a span in the above case), and then add the logic for your second custom template there. No matter what you need, vue-good-table has you covered.

要添加另一个自定义列，只需在关闭v-if标记之后添加一个v-else-if (在上述情况下为跨度)，然后在其中添加第二个自定义模板的逻辑。无论您需要什么，都可以使用vue-good-table。

日期选择器 (Date Picker)

Top pick: vue2-datepicker

用法 (Usage)

Import in a component or view to make it usable.

导入组件或视图以使其可用。

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

In template:

在模板中：

Here I’m using the range option to allow the user to select a date range and am v-modeling the user-inputted date to a data value called dateRange. dateRange is then used by vue-good-table (below) to sort my table’s results. I’m also using the event options @clear and @input to trigger methods which reset a table (resetList) or send a server request for table data (searchDate). Vue2-datepicker offers many more options and events for your convenience, but these are the ones I find myself using most often.

在这里，我使用range选项允许用户选择日期范围，并将用户输入的日期v-model为名为dateRange的数据值。然后，vue-good-table(如下)使用dateRange对我的表的结果进行排序。我还使用事件选项@clear和@input来触发重置表( resetList )或发送服务器请求表数据( searchDate )的方法。为了您的方便，Vue2-datepicker提供了更多选项和事件，但是这些是我发现自己最常使用的选项和事件。

用户等级 (User Ratings)

Top pick: vue-star-rating

热门精选： vue星级

While you might not use this feature in every project, for any site that requires a user-rating element (think Amazon or Rotten Tomatoes) vue-star-rating is my go-to choice. It might seem like a trivial thing to build on your own, but when you get into the details, star ratings can quickly become more complicated than you expected. It lets you use custom SVG shapes if you need something special and has easy customization of size, spacing, and colors.

尽管您可能不会在每个项目中都使用此功能，但是对于需要用户评分元素的任何网站(例如Amazon或Rotten Tomatoes)，我都选择vue-star-rating 。依靠自己构建似乎是一件微不足道的事情，但是当您深入研究细节时，星级评定可能会Swift变得比您预期的要复杂。如果需要特殊功能，它可以让您使用自定义SVG形状，并且可以轻松自定义大小，间距和颜色。

The options make it easy to v-model user selection ratings to wherever you want to use them, and you can set the rating to be changeable or read-only with a single prop.

该选项可以很容易地v-model用户选择评级，无论你想要使用它们，您可以设置评级多变或只读与单一的道具。

If you ever find the need for more options, check out the creator’s extended package vue-rate-it.

如果您发现需要更多选项，请查看创建者的扩展程序包 vue-rate-it 。