Mtoast-vue-plugin NPM

mtoast-vue-component

A Toast vue-component for Web Application

Characteristic Description

Lightweight plug-ins, independently, for Vue-Component
Cover common situations(Successful state, Failure state, Warning state, Ordinary state)
Support HTML strings
……
中文文档

Update Log Records

2019-05-12 @v1.3.0
A new control parameter is added named 'isShowClose ', used to control whether the right close-tag is displayed, default to false
2019-03-08 @v1.2.0
A new control parameter is added named 'isShowDot ', used to control whether the left circle is displayed, default to true
2019-03-02 @v1.1.8
Repackaged files, and fixed the document
2019-03-01 @v1.1.5
Modified a parameter: 'delay', Modified to 'duration'
2019-02-28 @v1.1.4
Tips method is added, use it, common text or text with HTML Tags prompts can be displayed. See below for details
Modified the calculation method of the distance from top of toast to top of viewport
Modified the default hidden latency, modification from 2000ms to 2500ms
……

Run

cd ./config

vim webpack.dev.config.js

Modify the corresponding IP and port

npm run server

Interface Specification

get & install

// install
npm install mtoast-vue-plugin --save-dev

initial

// import
import Vue from 'vue'
import Mtoast from 'mtoast-vue-plugin'

// use
Vue.use( Mtoast.vMtoast );

use

// type: success
this.$mtoast.success(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}

// type:  warn
this.$mtoast.warn(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}

// type:  error
this.$mtoast.error(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: true,  // default value: true. show dot in left area
    isShowClose: false  // default value: false. hide close-tag:X in right area
}

// type:  tips
this.$mtoast.tips(String msg, [Object: option]);

// optional parameters
option: {
    duration: 5000,  // default value: 2500ms. Disappeared after 5 seconds
    isShowDot: false,  // default value: true. hide dot in left area
    isShowClose: true  // default value: false. show close-tag:X in right area
}

UI

Common-Type
Success-Type
Error-Type or Failure-Type
Warning-Type
Long text, width Warning-Type
Especial text with HTML Tags, with Error-Type
Especial text with HTML Tags, with Common-Type