zoukankan      html  css  js  c++  java
  • mint-ui之toast使用(messagebox,indicator同理)

    toast为消息提示框,支持自定义位置、持续时间和样式。

    一,注意事项

    方法1   引入整个 Mint UI 组件,并需要再次单独引入Toast组件

      Toast,它并不是一个全局变量,需要先引入 import { Toast } from 'mint-ui' 再使用

      Toast('提示信息');

    方法2 引入整个 Mint UI 不再单独引入Toast组件

         this.$toast('提示信息');

       官方文档没写,但看下源码的index.js就找得到

         Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;

         Vue.$toast = Vue.prototype.$toast = Toast;

         Vue.$indicator = Vue.prototype.$indicator = Indicator;

       (所有引用插件的源码都在node_modules下面)

    二,用法

       1.基本用法

        Toast('提示信息');

      2.多配置用法

      

    let instance =Toast({ message: '提示', //提示内容分
           position: 'bottom', //提示框位置
           duration: 5000 , //持续时间(毫秒),若为 -1 则不会自动关闭
           iconClass: 'icon icon-success' , //icon 图标的类名
           className:'addClass'   //Toast 的类名。可以为其添加样式
    });    
    setTimeout(() => {
    instance.close()
    }, 2000)

     

  • 相关阅读:
    5059 一起去打CS
    2439 降雨量
    vijos P1037搭建双塔
    4979 数塔
    2596 售货员的难题
    P2342 叠积木
    1540 银河英雄传说
    1051 接龙游戏
    hdu1251
    洛谷P1717 钓鱼
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/8421518.html
Copyright © 2011-2022 走看看