vue-messages-test

Mobile UI Component - Vue-messages

DOCS

中文 | English

Online preview

Introduction

Lightweight Mobile UI Component build on Vue2.0 and like iview style.

Features

• Friendly interface docs
• Simple UI style
• Lightweight & Quickly
• Support mobile
• Support custom CSS style(implement in 2.0)
• Support JSX render(implement in 2.0)

Begin

Install use npm:

$ npm install vue-messages

Usage

import Vue from 'vue'
// import other modules
...
// note the import order 
import VueMessages from 'vue-messages'


Vue.use(VueMessages)
...

Launch Vue project，Enter the following expression in console，check if there is an Object.

// If there is an Object，it means the import is success
// otherwise，the import is fail.

$ window.$Message

use in Vue

API

Use the component in the following methods

// config TYPE： string | object
this.$Message.info(config)
this.$Message.success(config)
this.$Message.warning(config)
this.$Message.error(config)
this.$Message.loading(config)

config OPTIONS

attr	desc	type	default
content	display content	string	-
duration	duration time	number	2000(unit:ms)
styles	custom style	Object	-
Subsequent implementation			-
Theme	(advance)theme	Object	-
render	(advance)render function(support JSX)	Function	-

Message Type

Currently supports four types：

• success
• info
• warning
• error

Demo

Github Source code

Welcome discussion in the following site

issues1

License

MIT

Copyright (c) 2017-present, Charles yang