vue-toast-plugin-mobile

vue 移动端组件 toast

Installation

npm install vue-toast-plugin-mobile
//or
yarn add vue-toast-plugin-mobile

Usage

// main.js
import Vue from 'vue'
import 'vue-toast-plugin-mobile/lib/index.css' // 在入口js引入css

// Home.vue
import Toast from 'vue-toast-plugin-mobile'
export default {
  mounted() {
    Toast.show('这是一个持续1.5S的toast')

    setTimeout(() => {
      Toast.show({
        message: '这是一个持续4S的toast',
        duration: 4000
      })
    }, 3000)

    Toast.close() // 关闭

    setTimeout(() => {
      Toast.success('操作成功')

      // 下面的写法也是同样的效果
      // Toast.show({
      //   message: '操作成功',
      //   type: 'success'
      // })
    }, 7000)

    setTimeout(() => {
      Toast.loading('加载中') // type = loading 时 必须调用 Toast.close() 方法关闭， deration 参数失效
    }, 10000)
  }
}

若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast（图标需自行准备)

// iconClass 会覆盖type类型的内置icon
Toast.show({
  message: '操作成功',
  iconClass: 'icon icon-success'
})

API

参数	说明	类型	可选值	默认值
message	需要展示的内容	string
position	Toast 的位置	string	top , bottom , middle	middle
type	内置的 toast 类型	string	success , fail , loading , info
duration	持续时间（毫秒），若为 -1 则不会自动关闭 ()	number		1500
mask	是否显示遮罩层	boolean		false
className	Toast 的类名。可以为其添加样式	String
iconClass	icon 图标的类名	String

注： duration = -1 或者 type = 'loading' 时，duration 无效，toast 不会消失；隐藏 toast 需要手动调用 close

全局销毁方法： Toast.close()