npm 包 toast-vue 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言：

在前端开发的过程中，我们通常需要各种各样的提示框来显示一些成功、错误、警告等信息。而这些提示框的样式、交互有时候需要我们自己开发，但是我们通常不希望把大量的时间用于开发这些东西，因此我们使用了一系列的第三方库、插件。

在本文中，我们将介绍一款非常易用的 npm 包 - toast-vue ，它帮助我们快速搭建各种提示框，支持在 Vue.js 中使用，并且样式可以轻松定制。

toast-vue 的安装

我们可以使用如下的命令来安装 toast-vue ：

npm install toast-vue

当然，如果你想在自己的 Vue 初始化中使用这个组件，也可以在 Vue 初始化时进行全局注册：

import Vue from 'vue'
import Toast from 'toast-vue'

Vue.use(Toast)

toast-vue 的使用

使用 toast-vue 就像使用 Vue 中的 built-in 组件一样简单。我们可以直接在 Vue 组件中使用该组件，而不需要引用其他的 JS 或 CSS 文件。

基本的 toast

-- -------------------- ---- -------
----------
    -----
        ------- -------------------------- ------------
        ------ --------------------
    ------
-----------

--------
------ ------- ---- -----------

------ ------- -
    -------- -
        ----------- -
            ----------------------------- --------
        -
    --
    ----------- -
        -----
    -
-
---------

这里我们只需要在 <template> 标签下使用一个 button 组件，同时还需要一个 <toast> 组件，而 button 的 click 事件触发了我们通过 toast() 方法手动打开 toast 。

自定义 toast 样式

当然，如果想要定制自己的 toast 样式，那也是非常容易的。toast-vue 中提供了一些 CSS 类可以快捷地实现这一目的。

这里以定义一个 error 类型的 toast 样式为例：

CSS 样式

.toast .toast-error {
    background: #fda;
    color: #f00;
}

Vue 组件

-- -------------------- ---- -------
----------
    -----
        ------- -------------------------- ------------
        ------ --------------------
    ------
-----------

--------
------ ------- ---- -----------

------ ------- -
    -------- -
        ----------- -
            --------------------------------- ---- -------- -
                ---------- -------------
            --
        -
    --
    ----------- -
        -----
    -
-
---------

toast-vue 的参数

toast() 方法除了第一个参数外，还可以传递一些其他的参数，设置不同的风格，使用示例如下：

this.$refs.toast.toast(message, {
  duration: 3000,	// 显示时长
  className: 'toast-warning',	// 组件样式
  onClose() {	// 关闭回调函数
    console.log('toast closed')
  }
})

总结

toast-vue 是一个非常实用的 Vue 组件，让我们可以快速搭建各种提示框，同时样式可以轻松定制。在开发过程中，最大的优点就是让我们可以快速开发出美观、交互友好的提示框，并大大提高了开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055d9081e8991b448db50f

npm 包 toast-vue 使用教程

前言：