其他
我不能没有的5个Vue.js库
1.Click Off to Close
main.js
中,以便在我的应用程序中使用。如果你只在一个或两个页面上使用它,你可能会想单独导入它。✅ directives: { onClickaway }
❌ components: { onClickaway }
main.js
中):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
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有一个很好的在线演示,在这里你可以看到每个选项属性的结果,只需要复制粘贴你想要的选项,就像我上面做的那样。选项1:在组件(模板)中使用Toast
<button @click="showToast">Show toast</button>
选项2:在Vuex action中发现错误(或成功)时调用Toast
.error
改为 .success,
.info,
.warning 即可更改所需的Toast类型,也可以将其完全删除以作为默认的Toast通知。3.Tables
首选:vue-good-table
:rows
数据绑定到名为 getOrderHistory
的Vuex getter。在本地 data()
中定义我的列:
label
是显示的列标题,而 field
是我在Vuex getter中绑定的数据。formatFn
来格式化我的价格,调用了一个我命名为 toLocale
的单独方法,然后我通过绑定 tdClass
到我在 local <style>
中设置的类来定制每个单元格的外观。Vue-good-table确实内置了无穷的可定制性,他们已经覆盖了非常广泛的边缘案例。v-if
定义应将其注入的位置。v-if
标签后面添加一个 v-else-if
(在上面的例子中是一个跨度),然后在那里添加第二个自定义模板的逻辑。无论你需要什么,vue-good-table都能满足你的需求。4.Date Picker
首选:vue2-datepicker
import DatePicker from 'vue2-datepicker';
// styles
import 'vue2-datepicker/index.css';
在模板中:
range
选项,允许用户选择日期范围,并将用户输入的日期 v-model
以一个名为 dateRange
的数据值绑定。然后,vue-good-table(如下)使用 dateRange
对我的表的结果进行排序。我还使用事件选项 @clear
和 @input
来触发重置表(resetList)或发送服务器请求表数据(searchDate)的方法。Vue2-datepicker提供了更多的选项和事件,以方便你的使用,但这些是我发现自己最经常使用的。5.User Ratings
首选:vue-star-rating
v-model
绑定到任何你想使用的地方,你可以通过一个prop将评级设置为可更改或只读。将其导入到组件或视图中:
推荐阅读