5个好用的Vue.js库推荐-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

下面vue.js栏目给大家分享5个好用的Vue.js库。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1.Click Off to Close

有的时候，我们需要在用户点击元素之外的时候触发一个事件。最常见的用例是当你想通过点击关闭一个下拉框或对话框时。这是一个必不可少的包，几乎在我构建的每个应用中都会用到。

首选：vue-clickaway

我通常会将它安装在 main.js 中，以便在我的应用程序中使用。如果你只在一个或两个页面上使用它，你可能会想单独导入它。

如果你真的单独导入，请记住，指令需要在指令下暴露。

directives: { onClickaway }

而不是组件：

components: { onClickaway }

使其全局可用（在 main.js 中）：

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

在模板中：

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

注意：你应该总是在 close 方法中使用 vue-clickaway ，而不是 toggle 方法。我的意思是这个方法连接到v-on-clickaway 应该是这样的:

closeMethod() {
  this.showSomething = false
}

而不是这样：

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

如果你使用了 toggle 方法，那么每当你在该元素外点击时，无论你点击什么，它都会打开，然后一遍遍地关闭该元素。这很可能不是你想要的结果，所以请记住使用 close 方法来防止这种情况发生。

2.Toasts (Notification Bar)

首选：vue-toastification

你有很多toast和类似通知的选择，但我是Maronato的vue-toastification的忠实粉丝。它提供了大量的选项来覆盖你的大部分边界情况，而且样式和动画导致了出色的用户体验，远远超过其他软件包。

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

全局使用（在 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
})

你可以在每个组件中单独控制样式，但在上面的案例中，我通过将它导入 main.js，然后在那里设置我想使用的选项，使它在我的应用程序中到处可用，这使我不必每次都编写相同的选项属性。Vue-toastification有一个很好的在线演示，在这里你可以看到每个选项属性的结果，只需要复制粘贴你想要的选项，就像我上面做的那样。