美文网首页程序员
Jquery消息提示插件toastr在Vue项目中使用及修改

Jquery消息提示插件toastr在Vue项目中使用及修改

作者: 被饿死的小智啦 | 来源:发表于2019-11-22 15:56 被阅读0次

            今天接到一个需求,需要实现一个气泡弹出提示信息的效果,不过没有给设计图。咱当时一看,这是让咱自由发挥呀,那行!咱二话不说先百度,找了会儿,就找到toastr这个组件。看看效果图。很好咱很满意,就决定是你了。

    toastr的提示效果图

    使用步骤如下:

    1.在项目的html文件中导入css文件和js文件。

    导入css文件 导入js文件

    2.在mounted中把toastr的配置写上(如果不做修改的话就可以不用写)

    toastr 配置项

    弹出位置可选项:

        1 toast-top-left 顶端左边

        2 toast-top-right    顶端右边

        3 toast-top-center  顶端中间

        4 toast-top-full-width 顶端,宽度铺满整个屏幕

        5 toast-botton-right 

        6 toast-bottom-left

        7 toast-bottom-center

        8 toast-bottom-full-width

    3.使用

    使用方式

            正常情况下到这步就结束了,但是如果觉得提示的样式不喜欢那就得再继续。

    4.扩展(更改样式或者提示图标)

            找到toastr.min.css的源文件,进行相应的修改就是了。

            比如咱这边想要改个颜色就只用修改下图四个样式。

    背景颜色样式

            如果想修改图标,仅需要找到下图样式修改。

    图标样式

            行吧,就这么多。溜了溜了。

    相关文章

      网友评论

        本文标题:Jquery消息提示插件toastr在Vue项目中使用及修改

        本文链接:https://www.haomeiwen.com/subject/ecqqwctx.html