\n\n## DOCS\n[中文](https://github.com/yang657850144/vue-message/blob/master/README-ZH.md) | [English](https://github.com/yang657850144/vue-message/blob/master/README.md)\n\n\n[Online preview](http://www.yangoogle.com/#/lib/messages)\n\n## Introduction\n\n> Lightweight Mobile UI Component build on Vue2.0 and like [iview](https://www.iviewui.com/) style.\n\n## Features\n\n* [x] Friendly interface docs\n* [x] Simple UI style\n* [x] Lightweight & Quickly\n* [x] Support mobile\n* [x] Support custom CSS style(implement in 2.0)\n* [ ] Support JSX render(implement in 2.0)\n\n\n## Begin\n\n**Install**\nuse npm:\n\n```\n$ npm install vue-messages\n```\n\n**Usage**\n\n```javascript\nimport Vue from 'vue'\n// import other modules\n...\n// note the import order \nimport VueMessages from 'vue-messages'\n\n\n/** default configuration */\nVue.use(VueMessage)\n\n/** advance configuration */\nVue.use(VueMessage, {\n content:'',\n duration: 1, // unit: s\n themes: 'blackGold', // classic or classicBold\n styles: {\n top: 24, // unit: px\n fontWeight: 'normal' // normal or bold\n fontSize: 28\n },\n before () {\n console.log('custom before hook')\n },\n done () {\n console.log('custom done hook')\n }\n})\n```\n\n\nLaunch Vue project，Enter the following expression in console，check if there is an Object.\n\n```\n// If there is an Object，it means the import is success\n// otherwise，the import is fail.\n\n$ window.$Message\n```\n\n\n**Usage**\n\n> For Vue\n\n\n\n\n\n\nAPI\n\nUse the component in the following methods\n\n```javascript\n\n/** config TYPE： string */\nthis.$Message.info(config)\nthis.$Message.success(config)\nthis.$Message.warning(config)\nthis.$Message.error(config)\nthis.$Message.loading(config)\n\n\n/** config TYPE： object */\nthis.$Message.info({\n content: 'This is a normal message.',\n duration: 1,\n themes: 'classic', // classic blackGold\n styles: {\n fontSize: 14 // 单位: px\n },\n before () {\n console.log('my before hook')\n },\n done () {\n console.log('my done hook')\n }\n})\n// other type \n...\n```\n\n\n**OPTIONS**\n\n\n| attr | desc | type | default |\n| --- | --- | --- | --- |\n| duration | duration time | number | 2(unit:s) |\n| styles | custom style| Object | {fontSize:'16px',top:'20px'} |\n| Theme | (advance)theme | String | 'classic' Or 'classicBold' |\n| before | Hook Function| Function | - |\n| done | Hook Function| Function | - |\n| Subsequent implementation | | | - |\n| render | (advance)render function(support JSX) | Function | - |\n\n\n**Message Type**\n\n\nCurrently supports four types：\n\n- success\n- info\n- warning\n- error\n\n**Demo** \n\n\n\n\n\n[Github Source code](https://github.com/yang657850144/vue-message)\n\n\n**Welcome discussion in the following site👇**\n\n[issues1](https://github.com/yang657850144/vue-message/issues/1)\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2017-present, Charles yang\n\n","readmeFilename":"README.md"}
![](\"https://file.iviewui.com/logo-new.svg\"/){kind=logo}
\n \n![\"vue\"](\"https://makefriends.bs2dl.yy.com/bm1539228392003.svg\")
\n ![\"vue\"](\"https://makefriends.bs2dl.yy.com/bm1541835935319.svg\")
\n ![\"vue\"](\"https://makefriends.bs2dl.yy.com/bm1539228515177.svg\")
\n ![\"vue\"](\"https://makefriends.bs2dl.yy.com/bm1539228726851.svg\")
\n