vue.js中toast用法及使用toast弹框的实例代码

下面是关于“vue.js中toast用法及使用toast弹框的实例代码”的攻略。

什么是Toast

Toast是移动端或Web端的一种轻量级提示框架，常用于简短的操作提示，例如登录成功、数据保存、网络错误、支付完成等提示。

在Vue.js中，常用的全局提示框插件有vue-toasted、vux和mint-ui等。下面分别介绍这三个插件的使用方法和示例代码。

使用vue-toasted插件

vue-toasted插件是一款基于Toastify.js的Vue.js2.0轻量级Notification框架，使用简便，具有很好的扩展性。

安装并引入Toastify.js和vue-toasted

npm install toastify-js
npm install vue-toasted

import Toastify from 'toastify-js';
import Toasted from 'vue-toasted';
Vue.use(Toasted);

使用全局Toast

在Vue组件中，我们可以使用全局Toast方法，如下所示：

this.$toasted.show('提示文本', { 
    position: 'top-center', 
    duration: 3000 
});

示例1：自定义Toast

我们可以使用vue-toasted的register方法来自定义一个全局Toast：

Vue.toasted.register('my_custom_toast', (payload) => {
    if(payload.message) {
        // 使用Toastify.js创建Toast
        Toastify({
            text: payload.message,
            duration: payload.duration ? payload.duration : 3000,
            backgroundColor: "#007aff"
        }).showToast();
    }
});

然后，在Vue组件中就可以像这样调用：

this.$toasted.my_custom_toast('自定义提示', { duration: 3000 });

这里我们自定义了一个名为my_custom_toast的Toast方法，调用时可以传入一个提示文本和一个Options对象，其中duration表示持续时间，默认为3000ms（3秒）。

示例2：使用PluginOptions

我们也可以在Vue的实例化中使用PluginOptions参数，以全局定义Toast的默认参数：

Vue.use(Toasted,{
    position:'top-center',
    duration: 3000,
    theme: 'toasted-primary',
    type: 'success',
});

然后在组件中使用全局$toasted：

this.$toasted.success('Success Message');

使用vux插件

vux是一个基于WeUI和Vue.js的移动端UI框架，包含了很多常用的组件和插件，其中包含Toast提示框。

安装并引入vux

vux插件可以使用gulp、webpack或directly include方式引入，这里我们演示直接include方式引用：

<link rel="stylesheet" href="//unpkg.com/vux/dist/vux.min.css">
<script src="//cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.3.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="//unpkg.com/vux/dist/vux.min.js"></script>

使用WeToast

WeToast是vux中的全局Toast组件，使用简便：

this.$vux.toast.show({
    text: '提示文本',
    position: 'middle',
    type: 'text',
    width: '15em',
    time: 3000,
    isShowMask: true
});

示例1：自定义Toast

我们也可以自定义一个Toast组件并引入到Vue实例中：

<v-toast ref="customToast" />

mounted () {
    // 自定义toast
    this.$refs.customToast.show({
        type: 'warn',
        width: '10em',
        text: 'warn message'
    });
}

示例2：使用WeLoading

WeLoading在vux中是一个全局Loading组件，可以实现全局Loading效果，用法与WeToast类似：

<loading :show="showLoading" />

created () {
    this.showLoading = true;
    setTimeout(() => {
        this.showLoading = false;
    }, 2000);
}

使用mint-ui插件

mint-ui是饿了吗开发的基于Vue.js的移动端UI组件库，提供了丰富的组件以及插件，其中也包含Toast提示框。

安装并引入mint-ui

npm i mint-ui -S

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

使用全局Toast

在组件中使用全局Toast方法：

this.$toast({
    message: '提示文本',
    position: 'bottom',
    duration: 3000
});

示例1：自定义Toast

我们可以通过在Vue实例中注册一个Toast组件的方法来自定义Toast：

Vue.prototype.$myToast = function (msg, obj) {
    let def = {
        message: msg,
        position: 'bottom',
        duration: 2000
    };
    let options = Object.assign({}, def, obj);
    this.$toast(options);
}

然后在组件中就可以像这样调用自定义Toast方法了：

this.$myToast('Custom Toast', { position: 'top' });

示例2：使用Loadmore

Loadmore是 Mint-UI的一个全局Loading组件，用法与其它Toast类似：

<mt-loadmore :up="true" :auto-fill="true"></mt-loadmore>

mounted () {
    setTimeout(() => {
        this.loading = false;
    }, 2000);
}

至此，我们介绍了三种常用的Vue.js中Toast插件，包括了使用及示例代码。