前言
在前端开发中,出现提示信息是很常见的需求,但是每个项目都从头开始写一个提示组件显然是不现实的。此时,我们可以使用一个开源的、易用的、可配置的提示插件——Vue-Simple-Toaster。
Vue-Simple-Toaster 是一个前端工具包,它提供了一个轻量级的、无需依赖其他库的 VueJS 组件,旨在为 VueJS 应用提供简单的通知和提示。
特性
- 灵活性:可以自定义组件
- 易于使用:简单的 API
- 强大的配置:可以轻松自定义多种样式
- 无误差:100% 代码覆盖率
- 全面的浏览器支持:支持所有现代浏览器
安装
你可以使用 npm 安装 Vue-Simple-Toaster。
--- ------- ------------------ ------
使用
在 main.js 中导入:
------ --- ---- ----- ------ --- ---- ----------- ------ ------- ---- -------------------- ------ ------------------------------------- ---------------- --- ----- ------- - -- ------- -----------------
在需要调用的组件中,使用 this.$toaster
对象调用组件。
--------------------------- -- - ------- ---------
除了 success
方法,还支持其他几种类型的方法:
error
warning
info
配置
使用 Vue-Simple-Toaster 的默认配置十分简单,但如果要在不同的应用程序中进行不同的通知,您还可以轻松自定义样式和其他配置属性。
在 main.js 中添加如下代码来定义全局配置:
---------------- - --------- ------------ --------- ----- ---------- -------- --------------- ------------------ --------- ------ ----- ----- ----- ---------- ---------- ------ ------ ------ ----------- --- --------------- --- ------ ----- ----- ------ --------------- -- --
在上面的示例中,我们可以看到一些自定义属性:
position
: 提示组件在页面的位置duration
: 提示时间className
: 提示组件的 CSS 类名containerClass
: 容器组件的 CSS 类名iconPack
: 图标库,支持 font-awesome 和 material-design-iconsicon
: 图标名称type
: 提示类型singleton
: 是否允许多个同时显示clear
: 是否强制清空所有内容toastStyle
: 提示样式containerStyle
: 容器样式title
: 提示标题font
: 是否使用默认字体closeAnimation
: 关闭动画样式
自定义
你可以通过如下方式,自定义修改提示组件。
自定义HTML
---------- ---- --------------------- ---- ----------------- -------------- ------------ -------------------- ---- ----------------- ------------------- -- ------------------ ----------- ------ ---- ------------------ ---------------------- ----------- -------- ---- --------------------- -------------------- -------------- ----------------------------- ---- ------------------------ ------------------- ------------------------- -- ------------------ ----------------------- ------ ------ ------ ----------- -------- ------ ------- - ------ --------- ----------- ------------ --------- - --------------- - ------ ------------------------ -- ------------ - ------ --------------------- -- -- -- ------------ - ------ --------------------- -- -- -- -------------- - ------ ----------------------- -- -- -- ------------- - ------ ---------------------- -- -- - -- -------- - ------------ - ------------------------ - - - --------- ------ ------- ------------- - -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ----- --------------- ----- - ------------- ------ - -------- ----- --------------- ---- ------------ ------- ----------- ----- -------------- ---- ----------- - --- ---- --------------- ----------- --- ---- ------------ ------- ---- --------------- ---- - ------------- ------------ - ------------ ---- - ------------- ----------- - - ---------- ----- ------------- ----- - ------------- ------------ - - ---------- ----- ------- -------- ------------- ----- - --------
自定义配置对象
------ ----------- ---- --------------- ---------------- - --------- ------------ --------- ----- ---------- --------------- --------------- ------------------ --------- --------- ----- --- ----- --- ---------- ------ ------ ------ ----------- --- --------------- --- ------ --- ----- ------ --------------- --- ---------------- - ------- - -------- ------------ ------ ---------- -------- ------------ ----- -------- - - --
如果你使用 icon
属性来指定图标,它将在自定义图标字典中以该名称引用。
不过需要注意的是,自定义图标的名称不能和默认图标库的名称一样,不然默认库的大概率会覆盖你的自定义图标。
结语
Vue-Simple-Toaster 提供了强大的能力,可以帮助你更方便地实现提示功能,极大的提高了我们的工作效率。希望这篇文章能够帮助到初学者,让他们能够快速入门,并能够在实际项目中得到实践。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055bca81e8991b448d966d