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