尽管这在我身上经常发生，但我仍然有一小部分喜欢的库，这些库在许多项目中都已使用，并且随着时间的推移，事实证明这些库非常有用。我尝试了许多方法来解决这些库解决的问题。我的选择受到使用该库的便利性，其功能的多样性以及使用该库所获得内容的良好外观的影响。结果，我得到了想要与您共享的列表。
1.通过在元素外部单击来隐藏它们
有时，当用户单击某个元素之外时，您需要触发一个事件。通常，您需要在需要时执行此操作，以便可以关闭下拉列表或对话框。我开发的几乎每个应用程序都使用一个程序包来实现此行为。
这是vue-clickaway库。
在元素外单击时隐藏元素
v使用vue-clickaway
我通常将此包包含在中
main.js，从而允许在整个应用程序中使用它。如果仅适用于一两个页面，则您很可能决定仅将其导入到需要的位置。
单独导入时，请记住，您正在导入的是指令，而不是组件。也就是说，正确的做法是：
directives: { onClickaway }
但不是这样的：
components: { onClickaway }
以下是使指令全局可用的方法（在中
main.js）：
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
这是在模板中使用此伪指令的方法（为简单起见，此处为代码的缩写版本）：
<button
v-on-clickaway="closeYearSelect"
class="select_option gray"
@click="toggleYearSelect"
>
<span class="txt">{{ selectedYear }}</span>
<span class="arrow blind">Open</span>
</button>
想象一下，我有一个完整的字段用于选择项目，包括项目列表
<li>（代码中未显示）。上面的按钮用于在屏幕上显示列表，当我在该元素之外单击时，我由此调用关闭列表的方法。与始终必须单击位于元素拐角处的关闭按钮相比，这提供了更好的用户体验。我们通过在按钮描述中添加以下结构来获得此功能：
v-on-clickaway="closeMethodName"
请注意，
vue-clickaway您应始终使用关闭内容的方法，而不是显示和隐藏元素的方法。我的意思是，连接到的方法v-on-clickaway应如下所示：
closeMethod() {
this.showSomething = false
}
但是这种方法不应该是这样的：
toggleMethod() {
this.showSomething = !this.showSomething
}
如果使用类似method的方法
toggleMethod，则在元素外部单击时，无论单击何处都将打开和关闭它。您可能不需要它。因此，只需使用v-on-clickaway隐藏元素的方法即可。
2.弹出通知
您可以使用多种工具创建Toast通知，但是我非常喜欢vue-toastification库。
通过vue-toastification实现的通知
它为开发人员提供了大量自定义设置，可用于实现满足各种需求的通知。该库的样式和动画功能使您可以创建引人入胜且易于使用的解决方案，比使用其他软件包创建的解决方案更好。
v使用vue强化
该库
vue-toastification可以以多种方式使用。有关详细信息，请参阅她的文档。例如，如果需要基于应用程序状态的更改或与服务器相关的操作显示通知，则可以在组件级别，全局级别甚至与Vuex结合使用它。
这是该库的全局使用示例（在中
main.js）：
import Toast from "vue-toastification"
//
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,
})
通知样式可以通过在每个组件中进行设置来分别控制，但在上述情况下，我通过将通知样式导入来使通知样式在整个应用程序中都可用
main.js。之后，我配置了通知设置。这免除了我每次使用通知时编写相同代码的麻烦。该VUE-toastification库有很大的操场上进行实验。在它上面，您可以看到参数对通知的影响，并立即将所需的内容复制到代码中。这正是我在上面的示例中所做的。
让我们考虑该库的几个用例。
▍选项1：在组件（在模板中）中使用通知
<button @click="showToast">Show toast</button>
这是单击按钮时调用的方法：
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
▍选项2：在Vuex中发生错误（或操作成功）时显示通知
以下是示例代码，以演示
this._vm.$toast.error发生错误时如何在Vuex中使用它：
async fetchSomeData({ commit }) {
const resource_uri = `/endpoint/url`
try {
await axios.get(resource_uri).then((response) => {
commit(SET_DATA, response.data)
})
} catch (err) {
this._vm.$toast.error('Error message: ' + err.message)
}
}
您可以通过简单地改变方法名称更改的通知类型
.error来.success，.info或.warning。并且，如有必要，您可以将其完全删除，并使用默认设置接收通知。
通过Toast通知，开发人员可以根据应用程序状态的更改或发生意外错误时显示一些信息。这改善了应用程序的用户体验。与模式或丑陋的警报窗口相比，吐司通知为用户提供了更好的视觉事件指示。实际上，在使用窗口时，用户需要再次单击鼠标以将其关闭。用户会欣赏到您给他们直观的提示，指出出了点问题，从而避免了无助地盯着屏幕，等待永远不会发生的事件。此外，通知对于确认某些操作是否成功很有用。
3.使用表
表是许多Web应用程序中非常重要的部分。选择低质量的电子表格库可能会导致很多问题。我尝试了许多类似的库，并选择了vue-good-table。
使用vue-good-table的示例
我相信该库能够解决开发人员面临的大多数表工作任务。它的名字“好桌子”不仅仅是单词。这是一个非常好的库，为我们提供了比我们预期更多的功能。
v使用vue-good-table
在以下示例中，我将数据绑定
:rows到名为的Vuex获取器getOrderHistory：
<vue-good-table
class="mx-4"
:columns="columns"
:rows="getOrderHistory"
:search-options="{ enabled: true }"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 25,
position: 'top',
perPageDropdown: [25, 50, 100],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // 'pages'
allLabel: 'All'
}"
>
以下是本地数据（
data()）中表列的说明：
columns: [
{
label: 'Order Date',
field: 'orderDtime',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
tdClass: 'force-text-center resizeFont'
},
{
label: 'Order Number',
field: 'orderGoodsCd',
type: 'text',
tdClass: 'resizeFont'
},
{
label: 'Title',
field: 'orderTitle',
type: 'text',
tdClass: 'resizeFont ellipsis'
},
{
label: 'Price',
field: 'saleAmt',
type: 'number',
formatFn: this.toLocale
},
{
label: 'Edit btn',
field: 'deliveryUpdateYn',
type: 'button',
tdClass: 'force-text-center',
sortable: false
},
]
这
label是屏幕上显示的列标题，field这是要在Vuex getter中绑定的数据。
在上面的示例中，我正在使用某些vue-good-table表配置功能。例如，这可以设置输入和输出日期格式（这使我可以从服务器获取日期和时间的完整说明，并以更方便的格式向用户显示此信息）。我在这里也使用它
formatFn通过我命名的特殊方法来格式化价格toLocale。然后，通过绑定tdClass到我在本地标记中设置的类，自定义表格单元格的外观<style>... vue-good-table软件包实际上内置了无穷的自定义选项。这些功能使您可以创建适合多种用途的表。
▍创建自己的模板
vue-good-table库也可以与程序员自己创建的模板配合使用。这意味着您可以轻松地在表单元格中嵌入按钮，用于从列表中选择值的字段或其他任何内容。为此，使用伪指令足以
v-if指示应放置特殊内容的位置。这是在表列中添加按钮的示例。
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' ">
<BaseButton class="button" @click="showModal">
Cancel Order
</BaseButton>
</span>
</template>
在此示例中，我描述了一个打开模式窗口的按钮。
cancelYn如果相应数据字段的值等于，则显示在字段（列中）中Y。
要将自己的另一列添加到表中，只需
v-else-if在使用指令的结束标记之后添加一个构造v-if（在我们的例子中，这是一个标记<span>）。之后，您需要描述新列的逻辑。通常，我们可以说vue-good-table库可以在与Web上的表显示相关的任何情况下提供帮助。
4.挑选日期的工具
现在，我将向您介绍一个旨在组织日期选择的库。在各种各样的现实应用中发现了类似的东西。实现此功能的库比解决我在此谈论的其他问题的库多。我定期返回vue2-datepicker库来解决此问题。
使用vue2-datepicker库的示例使用
此库创建的日期选择器控件易于设置样式。它支持大量与日期选择和日期范围有关的自定义。该库使您可以创建简洁方便的用户界面元素。它甚至支持本地化工具。
请注意，尽管该程序包称为vue2-datepicker，但在基于Vue 3的应用程序中使用它应该没有问题（本文中讨论的其他库也是如此）。
v使用vue2-datepicker
该库可以导入到组件中或包含在模板中。
这是将其导入组件的示例：
import DatePicker from 'vue2-datepicker';
//
import 'vue2-datepicker/index.css';
以下是在模板中使用它的方法：
<date-picker
v-model="dateRange"
value-type="format"
range
@clear="resetList"
@input="searchDate"
></date-picker>
在这里，我正在使用一个选项，
range允许用户选择日期范围。在这里，我使用指令v-model将用户输入的数据连接到value dateRange。然后dateRange，例如，可以使用vue-good-table定制表中数据的输出。我还在这里使用事件选项-@clear和@input，使用它们来调用方法，其中一个转储表（resetList），第二个向服务器发送请求（searchDate）。vue2-datepicker库为我们提供了比我在此描述的更多的选项和事件。但是我在这里所说的，我经常使用。
5.评分
例如，可以在Amazon和Rotten Tomatoes等网站上找到评级系统。也许您没有在每个项目中都使用这样的系统，但是我在需要它的每个站点上都使用vue-star-rating库实现了此功能。
使用vue-star-rating库的示例
看起来像这样的事情很容易创建。但是，如果您深入研究细节，事实证明，开发这样的控件可能会很快变得比您预期的要困难得多。该库允许您使用自己的SVG图像来自定义用于评分的形状的形状。它允许您调整元素的大小，元素之间的距离以及它们的颜色。
用户使用vue-star-rating中的控件对某事物给予的评分可以轻松
v-model地转移到您打算使用它的地方。可以使用单个参数使估算值可变或不可变。
而且，如果您发现使用此库时需要更多功能，请查看同一作者的vue-rate-it软件包。
v使用Vue星级
这是在模板（带有选项）中使用此库的方法：
<star-rating
class="star-rating"
:rating="newReivew.score"
active-color="#FBE116"
:star-size="starSize"
:increment="increment"
:show-rating="showRating"
@rating-selected="setRating"
/>
将其导入组件的方法如下：
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
结果
我们已经介绍了Vue的5个库。我们希望您在这里找到了一些对您的项目开发有用的东西。
您使用最多的哪个Vue.js库？
