vue-messages
Vue-messages Component for test
Last updated 6 months ago by a657850144 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-messages 
SYNC missed versions from official npm registry.

Mobile UI Component - Vue-messages

vue vue vue vue

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
  • [x] 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'


/** default configuration */
Vue.use(VueMessage)

/** advance configuration */
Vue.use(VueMessage, {
  content:'',
  duration: 1, // unit: s
  themes: 'blackGold', // classic or classicBold
  styles: {
    top: 24, // unit: px
    fontWeight: 'normal' // normal or bold
    fontSize: 28
  },
  before () {
    console.log('custom before hook')
  },
  done () {
    console.log('custom done hook')
  }
})

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

Usage

For Vue

API

Use the component in the following methods


/** config TYPE: string */
this.$Message.info(config)
this.$Message.success(config)
this.$Message.warning(config)
this.$Message.error(config)
this.$Message.loading(config)


/** config TYPE: object */
this.$Message.info({
  content: 'This is a normal message.',
  duration: 1,
  themes: 'classic', // classic blackGold
  styles: {
    fontSize: 14 // 单位: px
  },
  before () {
    console.log('my before hook')
  },
  done () {
    console.log('my done hook')
  }
})
// other type 
...

OPTIONS

attr desc type default
duration duration time number 2(unit:s)
styles custom style Object {fontSize:'16px',top:'20px'}
Theme (advance)theme String 'classic' Or 'classicBold'
before Hook Function Function -
done Hook Function Function -
Subsequent implementation -
render (advance)render function(support JSX) Function -

Message Type

Currently supports four types:

  • success
  • info
  • warning
  • error

Demo

xxx

Github Source code

Welcome discussion in the following site????

issues1

License

MIT

Copyright (c) 2017-present, Charles yang

Current Tags

  • 2.0.16                                ...           latest (6 months ago)

26 Versions

  • 2.0.16                                ...           6 months ago
  • 2.0.15                                ...           7 months ago
  • 2.0.14                                ...           8 months ago
  • 2.0.13                                ...           8 months ago
  • 2.0.12                                ...           8 months ago
  • 2.0.11                                ...           8 months ago
  • 2.0.10                                ...           8 months ago
  • 2.0.9                                ...           8 months ago
  • 2.0.8                                ...           8 months ago
  • 2.0.7                                ...           8 months ago
  • 2.0.6                                ...           8 months ago
  • 2.0.5                                ...           8 months ago
  • 2.0.4                                ...           8 months ago
  • 2.0.3                                ...           8 months ago
  • 2.0.2                                ...           8 months ago
  • 2.0.1                                ...           8 months ago
  • 1.2.3                                ...           8 months ago
  • 1.2.2                                ...           9 months ago
  • 1.2.1                                ...           9 months ago
  • 1.1.1                                ...           9 months ago
  • 1.0.6                                ...           9 months ago
  • 1.0.5                                ...           9 months ago
  • 1.0.4                                ...           9 months ago
  • 1.0.3                                ...           9 months ago
  • 1.0.2                                ...           9 months ago
  • 1.0.1                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 26
This Month 27
Last Day 26
Last Week 0
Last Month 53
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |