Mobile UI Component - Vue-messages

DOCS

中文 | English

Online preview

Introduction

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

Features

• [x] Friendly interface docs
• [x] Simple UI style
• [x] Lightweight & Quickly
• [x] 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