├── .babelrc ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── build ├── gh-pages.sh ├── webpack.config.js ├── webpack.example.base.conf.js ├── webpack.example.dev.conf.js └── webpack.example.prod.conf.js ├── example ├── index.html └── src │ ├── App.vue │ ├── main.js │ └── template.js ├── lib ├── iconfont.svg └── message.js ├── package.json ├── release.sh └── src ├── components ├── message.js └── message.vue ├── fonts ├── iconfont.eot ├── iconfont.svg ├── iconfont.ttf └── iconfont.woff ├── index.js ├── styles └── less │ ├── base.less │ ├── font.less │ ├── index.less │ └── message.less └── utils └── util.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | **/*.js linguist-language=Vue 2 | **/*.less linguist-language=Vue 3 | **/*.css linguist-language=Vue 4 | **/*.html linguist-language=Vue -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .idea 4 | example/dist 5 | gh-pages -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # message 2 | 3 | > [Element](https://github.com/ElemeFE/element) Message clone, and did just a little change. If you have a better idea of this component improvement, please share it and I will update it immediately. 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install vue-multiple-message -S 9 | ``` 10 | 11 | ## Quick Start 12 | 13 | ```bash 14 | import Vue from 'vue' 15 | import Message from 'vue-multiple-message' 16 | Vue.prototype.$message = Message 17 | ``` 18 | 19 | For more information, please refer to [Message](https://vue-multiple.github.io/message) in our documentation. 20 | 21 | ## Build Setup 22 | 23 | ``` bash 24 | # install dependencies 25 | npm install 26 | 27 | # serve with hot reload at localhost:8080 28 | npm run demo:dev 29 | 30 | # build for demo with minification 31 | npm run demo:build 32 | 33 | # build for gh-pages with minification 34 | npm run demo:prepublish 35 | 36 | # build for production with minification 37 | npm run build 38 | 39 | # generate gh-pages 40 | npm run deploy 41 | ``` 42 | 43 | ## LICENSE 44 | 45 | [MIT](http://opensource.org/licenses/MIT) -------------------------------------------------------------------------------- /build/gh-pages.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | npm run demo:prepublish 3 | cd gh-pages 4 | git init 5 | git add -A 6 | git commit -m 'update gh-pages' 7 | git push -f git@github.com:vue-multiple/message.git master:gh-pages -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.resolve(__dirname, '..', './lib'), 9 | filename: 'message.js', 10 | library: 'message', 11 | libraryTarget: 'umd' 12 | }, 13 | externals: { 14 | vue: { 15 | root: 'Vue', 16 | commonjs: 'vue', 17 | commonjs2: 'vue', 18 | amd: 'vue' 19 | } 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue-loader', 26 | options: { 27 | loaders: { 28 | css: 'css-loader!vue-style-loader', 29 | less: 'css-loader!less-loader!vue-style-loader' 30 | // css: ExtractTextPlugin.extract({ 31 | // use: 'css-loader', 32 | // fallback: 'vue-style-loader' 33 | // }), 34 | // less: ExtractTextPlugin.extract({ 35 | // fallback: 'vue-style-loader', 36 | // use: ['css-loader', 'less-loader'] 37 | // }) 38 | } 39 | // other vue-loader options go here 40 | } 41 | }, 42 | { 43 | test: /\.css$/, 44 | use: [ 45 | {loader: 'style-loader'}, 46 | {loader: 'css-loader'} 47 | ] 48 | // loader: ExtractTextPlugin.extract({ 49 | // use: "css-loader", 50 | // fallback: "style-loader" 51 | // }) 52 | }, 53 | { 54 | test: /\.less$/, 55 | loader: [ 56 | {loader: 'style-loader'}, 57 | {loader: 'css-loader'}, 58 | {loader: 'less-loader'} 59 | ] 60 | // loader: ExtractTextPlugin.extract({ 61 | // fallback: 'style-loader', 62 | // use: ['css-loader', 'less-loader'] 63 | // }) 64 | }, 65 | { 66 | test: /\.js$/, 67 | loader: 'babel-loader', 68 | exclude: /node_modules/ 69 | }, 70 | { 71 | test: /\.(png|jpg|gif|svg)$/, 72 | loader: 'file-loader', 73 | options: { 74 | name: '[name].[ext]?[hash]' 75 | } 76 | }, 77 | { 78 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 79 | loader: 'url-loader', 80 | query: { 81 | limit: 10000, 82 | name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]') 83 | } 84 | } 85 | ] 86 | }, 87 | resolve: { 88 | extensions: ['.js', '.vue', '.json'] 89 | }, 90 | plugins: [ 91 | new webpack.optimize.UglifyJsPlugin({ 92 | sourceMap: true, 93 | compress: { 94 | warnings: false 95 | } 96 | }) 97 | // , 98 | // new ExtractTextPlugin({ 99 | // filename: '../lib/message.css', 100 | // allChunks: true 101 | // }) 102 | ] 103 | } -------------------------------------------------------------------------------- /build/webpack.example.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | entry: { 7 | app: './example/src/main.js' 8 | }, 9 | output: { 10 | path: '/example', 11 | filename: '[name].js', 12 | publicPath: '/' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.vue$/, 18 | loader: 'vue-loader', 19 | options: { 20 | // other vue-loader options go here 21 | loaders: { 22 | css: isProduction ? ExtractTextPlugin.extract({ 23 | fallback: 'vue-style-loader', 24 | use: 'css-loader' 25 | }) : 'vue-style-loader!css-loader', 26 | less: isProduction ? ExtractTextPlugin.extract({ 27 | fallback: 'vue-style-loader', 28 | use: ['css-loader', 'less-loader'] 29 | }) : 'vue-style-loader!css-loader!less-loader' 30 | } 31 | } 32 | }, 33 | { 34 | test: /\.js$/, 35 | loader: 'babel-loader', 36 | exclude: /node_modules/ 37 | }, 38 | { 39 | test: /\.(png|jpg|gif|svg)$/, 40 | loader: 'file-loader', 41 | options: { 42 | name: '[name].[ext]?[hash]' 43 | } 44 | }, 45 | { 46 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 47 | loader: 'url-loader', 48 | query: { 49 | limit: 10000, 50 | name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]') 51 | } 52 | } 53 | ] 54 | } 55 | } -------------------------------------------------------------------------------- /build/webpack.example.dev.conf.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var merge = require('webpack-merge') 3 | var baseWebpackConfig = require('./webpack.example.base.conf') 4 | var HtmlWebpackPlugin = require('html-webpack-plugin') 5 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 6 | 7 | module.exports = merge(baseWebpackConfig, { 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.css$/, 12 | loader: 'vue-style-loader!css-loader' 13 | }, 14 | { 15 | test: /\.less$/, 16 | loader: 'vue-style-loader!css-loader!less-loader' 17 | } 18 | ] 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: '#cheap-module-eval-source-map', 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': { 25 | NODE_ENV: '"development"' 26 | } 27 | }), 28 | new webpack.NoEmitOnErrorsPlugin(), 29 | new HtmlWebpackPlugin({ 30 | filename: 'index.html', 31 | template: 'example/index.html', 32 | inject: true 33 | }), 34 | new FriendlyErrorsPlugin() 35 | ] 36 | }) -------------------------------------------------------------------------------- /build/webpack.example.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var baseWebpackConfig = require('./webpack.example.base.conf') 5 | var HtmlWebpackPlugin = require('html-webpack-plugin') 6 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 7 | var isProduction = process.env.NODE_ENV === 'production' 8 | 9 | module.exports = merge(baseWebpackConfig, { 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.css$/, 14 | loader: ExtractTextPlugin.extract({ 15 | fallback: "vue-style-loader", 16 | use: "css-loader" 17 | }) 18 | }, 19 | { 20 | test: /\.less/, 21 | loader: ExtractTextPlugin.extract({ 22 | fallback: "vue-style-loader", 23 | use: ["css-loader", "less-loader"] 24 | }) 25 | } 26 | ] 27 | }, 28 | devtool: '#source-map', 29 | output: { 30 | path: path.resolve(__dirname, '..', `${isProduction ? './example/dist' : 'gh-pages'}`), 31 | publicPath: isProduction ? '/' : '/message', 32 | filename: 'js/[name].[chunkhash].js' 33 | }, 34 | plugins: [ 35 | new webpack.DefinePlugin({ 36 | 'process.env': { 37 | NODE_ENV: '"production"' 38 | } 39 | }), 40 | new webpack.optimize.UglifyJsPlugin({ 41 | sourceMap: true, 42 | compress: { 43 | warnings: false 44 | } 45 | }), 46 | new ExtractTextPlugin({ 47 | filename: 'css/[name].[contenthash].css', 48 | allChunks: true 49 | }), 50 | new HtmlWebpackPlugin({ 51 | filename: 'index.html', 52 | template: 'example/index.html', 53 | inject: true, 54 | minify: { 55 | removeComments: true, 56 | collapseWhitespace: true, 57 | removeAttributeQuotes: true 58 | // more options: 59 | // https://github.com/kangax/html-minifier#options-quick-reference 60 | }, 61 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 62 | chunksSortMode: 'dependency' 63 | }) 64 | ] 65 | }) 66 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | message 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/src/App.vue: -------------------------------------------------------------------------------- 1 | 256 | 257 | 353 | 354 | 359 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import Message from '../../src/index.js' 4 | 5 | import VueDemonstration from 'vue-demonstration' 6 | Vue.component('demonstration', VueDemonstration) 7 | 8 | import {Button} from 'vue-multiple-button' 9 | import 'vue-multiple-button/lib/button.css' 10 | Vue.component('vm-button', Button) 11 | 12 | Vue.component(Message.name, Message) 13 | Vue.prototype.$message = Message 14 | 15 | Message.config({ 16 | top: 20 17 | }) 18 | 19 | new Vue({ 20 | el: '#app', 21 | render: h => h(App) 22 | }) 23 | -------------------------------------------------------------------------------- /example/src/template.js: -------------------------------------------------------------------------------- 1 | export const sourcecodeA = ` 5 | 6 | ` 30 | 31 | export const sourcecodeB = ` 37 | ` 63 | 64 | export const sourcecodeC = ` 67 | 68 | ` 84 | 85 | export const sourcecodeD = ` 91 | 92 | ` 128 | 129 | export const sourcecodeE = `import Message from 'vue-multiple-message'` 130 | 131 | export const sourcecodeF = `import Vue from 'vue' 132 | import Message from 'vue-multiple-message' 133 | Vue.prototype.$message = Message` 134 | 135 | export const sourcecodeG = `Messge.config({ 136 | top: 20, 137 | duration: 3000, 138 | zIndex: 2000 139 | })` -------------------------------------------------------------------------------- /lib/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Sun Jul 23 11:49:26 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /lib/message.js: -------------------------------------------------------------------------------- 1 | !function(A,s){"object"==typeof exports&&"object"==typeof module?module.exports=s(require("vue")):"function"==typeof define&&define.amd?define(["vue"],s):"object"==typeof exports?exports.message=s(require("vue")):A.message=s(A.Vue)}(this,function(A){return function(A){function s(t){if(e[t])return e[t].exports;var n=e[t]={i:t,l:!1,exports:{}};return A[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}var e={};return s.m=A,s.c=e,s.i=function(A){return A},s.d=function(A,e,t){s.o(A,e)||Object.defineProperty(A,e,{configurable:!1,enumerable:!0,get:t})},s.n=function(A){var e=A&&A.__esModule?function(){return A.default}:function(){return A};return s.d(e,"a",e),e},s.o=function(A,s){return Object.prototype.hasOwnProperty.call(A,s)},s.p="",s(s.s=4)}([function(A,s){A.exports="data:application/vnd.ms-fontobject;base64,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"},function(A,s,e){"use strict";var t=e(16),n=e.n(t),B=e(5),r=n.a.extend(e(13)),o={},i=void 0,C=[],w=1,I=2e3,g=-1,Q=function A(s){if(!n.a.prototype.$isServer){if(s=s||{},"loading"===s.type&&i&&i.vm.visible)return i.vm;"string"==typeof s&&(s={message:s}),"zIndex"in s&&"number"==typeof s.zIndex&&s.zIndex>-1&&(g=s.zIndex),!s.duration&&void 0===s.duration&&o.duration&&(s.duration=o.duration);var t=s.onClose,Q="message_"+w++;return s.onClose=function(){A.close(Q,t)},i=new r({data:s}),i.id=Q,e.i(B.a)(i.message)&&(i.$slots.default=[i.message],i.message=null),i.vm=i.$mount(),document.body.appendChild(i.vm.$el),i.vm.visible=!0,i.dom=i.vm.$el,i.dom.style.zIndex=g<0?I++:g,"top"in o&&"number"==typeof o.top&&(i.dom.style.top=o.top+"px"),C.push(i),i.vm}};Q.config=function(A){"zIndex"in(o=A||{})&&"number"==typeof o.zIndex&&o.zIndex>-1&&(g=o.zIndex)},["success","warning","info","error","loading"].forEach(function(A){Q[A]=function(s){return"string"==typeof s&&(s={message:s}),s.type=A,Q(s)}}),Q.close=function(A,s){for(var e=0,t=C.length;e=0;A--)C[A].close()},s.a=Q},function(A,s,e){var t=e(6);"string"==typeof t&&(t=[[A.i,t,""]]);var n={};n.transform=void 0;e(9)(t,n);t.locals&&(A.exports=t.locals)},function(A,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={name:"VmMessage",componentName:"VmMessage",data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null}},watch:{closed:function(A){A&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destoryElement))}},methods:{destoryElement:function(){this.$el.removeEventListener("transitionend",this.destoryElement),this.$destroy(),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var A=this;this.duration>0&&(this.timer=setTimeout(function(){A.closed||A.close()},this.duration))}},mounted:function(){this.visible=!0,this.startTimer()}}},function(A,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var t=e(1),n=e(2);e.n(n);s.default=t.a},function(A,s,e){"use strict";function t(A,s){return r.call(A,s)}function n(A){return"object"===(void 0===A?"undefined":B(A))&&t(A,"componentOptions")}s.a=n;var B="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(A){return typeof A}:function(A){return A&&"function"==typeof Symbol&&A.constructor===Symbol&&A!==Symbol.prototype?"symbol":typeof A},r=Object.prototype.hasOwnProperty},function(A,s,e){s=A.exports=e(7)(void 0),s.push([A.i,'@font-face {\n font-family: "iconfont";\n src: url('+e(0)+");\n /* IE9*/\n src: url("+e(0)+"#iefix) format('embedded-opentype'), url("+e(12)+") format('woff'), url("+e(11)+") format('truetype'), url("+e(8)+'#iconfont) format(\'svg\');\n /* iOS 4.1- */\n}\n[class^="vm-message-icon"],\n[class*=" vm-message-icon"] {\n font-family: "iconfont" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.vm-message-icon--success {\n color: #13ce66;\n}\n.vm-message-icon--success:before {\n content: "\\E8E4";\n}\n.vm-message-icon--error {\n color: #ff4949;\n}\n.vm-message-icon--error:before {\n content: "\\E8E7";\n}\n.vm-message-icon--info {\n color: #50bfff;\n}\n.vm-message-icon--info:before {\n content: "\\E8EA";\n}\n.vm-message-icon--warning {\n color: #f7ba2a;\n}\n.vm-message-icon--warning:before {\n content: "\\E8EC";\n}\n.vm-message-icon--loading {\n color: #bfcbd9;\n animation: rotating 1s linear infinite;\n}\n.vm-message-icon--loading:before {\n content: "\\E8FD";\n}\n.vm-message-icon--close:before {\n content: "\\E8E8";\n}\n@keyframes rotating {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n}\n.vm-message {\n position: fixed;\n left: 50%;\n top: 20px;\n transform: translateX(-50%);\n min-width: 224px;\n padding: 10px 12px;\n background-color: #fff;\n box-sizing: border-box;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n border-radius: 4px;\n transition: opacity .3s, transform .4s;\n overflow: hidden;\n}\n.vm-message__group {\n position: relative;\n display: flex;\n height: 21px;\n align-items: center;\n}\n.vm-message__inner {\n margin: 0 34px 0 0;\n font-size: 14px;\n white-space: nowrap;\n color: #8391a5;\n text-align: justify;\n}\n.vm-message__icon {\n display: inline-block;\n vertical-align: middle;\n margin-right: 8px;\n}\n.vm-message__close {\n position: absolute;\n top: 0;\n right: 0;\n color: #bfcbd9;\n font-size: 21px;\n cursor: pointer;\n}\n.vm-message__close:hover {\n color: #97a8be;\n}\n.vm-message-fade-enter,\n.vm-message-fade-leave-active {\n opacity: 0;\n transform: translate(-50%, -100%);\n}\n',""])},function(A,s){function e(A,s){var e=A[1]||"",n=A[3];if(!n)return e;if(s&&"function"==typeof btoa){var B=t(n);return[e].concat(n.sources.map(function(A){return"/*# sourceURL="+n.sourceRoot+A+" */"})).concat([B]).join("\n")}return[e].join("\n")}function t(A){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(A))))+" */"}A.exports=function(A){var s=[];return s.toString=function(){return this.map(function(s){var t=e(s,A);return s[2]?"@media "+s[2]+"{"+t+"}":t}).join("")},s.i=function(A,e){"string"==typeof A&&(A=[[null,A,""]]);for(var t={},n=0;n=0&&u.splice(s,1)}function o(A){var s=document.createElement("style");return A.attrs.type="text/css",C(s,A.attrs),B(A,s),s}function i(A){var s=document.createElement("link");return A.attrs.type="text/css",A.attrs.rel="stylesheet",C(s,A.attrs),B(A,s),s}function C(A,s){Object.keys(s).forEach(function(e){A.setAttribute(e,s[e])})}function w(A,s){var e,t,n,B;if(s.transform&&A.css){if(!(B=s.transform(A.css)))return function(){};A.css=B}if(s.singleton){var C=l++;e=c||(c=o(s)),t=I.bind(null,e,C,!1),n=I.bind(null,e,C,!0)}else A.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=i(s),t=Q.bind(null,e,s),n=function(){r(e),e.href&&URL.revokeObjectURL(e.href)}):(e=o(s),t=g.bind(null,e),n=function(){r(e)});return t(A),function(s){if(s){if(s.css===A.css&&s.media===A.media&&s.sourceMap===A.sourceMap)return;t(A=s)}else n()}}function I(A,s,e,t){var n=e?"":t.css;if(A.styleSheet)A.styleSheet.cssText=y(s,n);else{var B=document.createTextNode(n),r=A.childNodes;r[s]&&A.removeChild(r[s]),r.length?A.insertBefore(B,r[s]):A.appendChild(B)}}function g(A,s){var e=s.css,t=s.media;if(t&&A.setAttribute("media",t),A.styleSheet)A.styleSheet.cssText=e;else{for(;A.firstChild;)A.removeChild(A.firstChild);A.appendChild(document.createTextNode(e))}}function Q(A,s,e){var t=e.css,n=e.sourceMap,B=void 0===s.convertToAbsoluteUrls&&n;(s.convertToAbsoluteUrls||B)&&(t=b(t)),n&&(t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var r=new Blob([t],{type:"text/css"}),o=A.href;A.href=URL.createObjectURL(r),o&&URL.revokeObjectURL(o)}var L={},E=function(A){var s;return function(){return void 0===s&&(s=A.apply(this,arguments)),s}}(function(){return window&&document&&document.all&&!window.atob}),a=function(A){var s={};return function(e){return void 0===s[e]&&(s[e]=A.call(this,e)),s[e]}}(function(A){return document.querySelector(A)}),c=null,l=0,u=[],b=e(10);A.exports=function(A,s){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");s=s||{},s.attrs="object"==typeof s.attrs?s.attrs:{},s.singleton||(s.singleton=E()),s.insertInto||(s.insertInto="head"),s.insertAt||(s.insertAt="bottom");var e=n(A,s);return t(e,s),function(A){for(var B=[],r=0;r -1 34 | ) { 35 | optsZIndex = options.zIndex 36 | } 37 | 38 | if (!options.duration 39 | && typeof options.duration === 'undefined' 40 | && global.duration) { 41 | options.duration = global.duration 42 | } 43 | 44 | let userOnClose = options.onClose 45 | let id = 'message_' + seed++ 46 | 47 | options.onClose = function () { 48 | Message.close(id, userOnClose) 49 | } 50 | 51 | instance = new MessageConstructor({ 52 | data: options 53 | }) 54 | instance.id = id 55 | if (isVNode(instance.message)) { 56 | instance.$slots.default = [instance.message] 57 | instance.message = null 58 | } 59 | instance.vm = instance.$mount() 60 | document.body.appendChild(instance.vm.$el) 61 | instance.vm.visible = true 62 | instance.dom = instance.vm.$el 63 | instance.dom.style.zIndex = optsZIndex < 0 64 | ? nextZIndex++ 65 | : optsZIndex 66 | if ( 67 | 'top' in global 68 | && typeof global.top === 'number' 69 | ) { 70 | instance.dom.style.top = `${global.top}px` 71 | } 72 | instances.push(instance) 73 | return instance.vm 74 | } 75 | 76 | Message.config = function (options) { 77 | global = options || {} 78 | if ( 79 | 'zIndex' in global 80 | && typeof global.zIndex === 'number' 81 | && global.zIndex > -1 82 | ) { 83 | optsZIndex = global.zIndex 84 | } 85 | } 86 | 87 | ;['success', 'warning', 'info', 'error', 'loading'].forEach(type => { 88 | Message[type] = options => { 89 | if (typeof options === 'string') { 90 | options = { 91 | message: options 92 | } 93 | } 94 | options.type = type 95 | return Message(options) 96 | } 97 | }) 98 | 99 | Message.close = function (id, userOnClose) { 100 | for (let i = 0, len = instances.length; i < len; i++) { 101 | if (instances[i].id === id) { 102 | if (typeof userOnClose === 'function') { 103 | userOnClose(instances[i]) 104 | } 105 | instances.splice(i, 1) 106 | break 107 | } 108 | } 109 | } 110 | 111 | Message.closeAll = function () { 112 | for (let i = instances.length - 1; i >= 0; i--) { 113 | instances[i].close() 114 | } 115 | } 116 | 117 | export default Message 118 | -------------------------------------------------------------------------------- /src/components/message.vue: -------------------------------------------------------------------------------- 1 | 16 | 78 | -------------------------------------------------------------------------------- /src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-multiple/message/cb5c29bc7ce42f7b2aeaa3ff3a90bc6d6be88d22/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Sun Jul 23 11:49:26 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-multiple/message/cb5c29bc7ce42f7b2aeaa3ff3a90bc6d6be88d22/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-multiple/message/cb5c29bc7ce42f7b2aeaa3ff3a90bc6d6be88d22/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Message from './components/message.js' 2 | import './styles/less/index.less' 3 | 4 | export default Message -------------------------------------------------------------------------------- /src/styles/less/base.less: -------------------------------------------------------------------------------- 1 | @vm-prefix: 'vm-'; 2 | 3 | @color-white: #fff; 4 | @color-success: #13ce66; 5 | @color-warning: #f7ba2a; 6 | @color-danger: #ff4949; 7 | @color-info: #50bfff; 8 | 9 | @box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); 10 | 11 | @message-min-width: 224px; 12 | @message-shadow: @box-shadow-base; 13 | @message-border-radius: 4px; 14 | @message-padding: 10px 12px; 15 | @message-content-color: #8391a5; 16 | @message-close-color: #bfcbd9; 17 | @message-close-hover-color: #97a8be; 18 | 19 | @message-success-color: @color-success; 20 | @message-info-color: @color-info; 21 | @message-warning-color: @color-warning; 22 | @message-danger-color: @color-danger; -------------------------------------------------------------------------------- /src/styles/less/font.less: -------------------------------------------------------------------------------- 1 | @message-icon-prefix-cls: ~"@{vm-prefix}message-icon"; 2 | 3 | @font-face { 4 | font-family: "iconfont"; 5 | src: url('../../fonts/iconfont.eot?t=1500451929261'); /* IE9*/ 6 | src: url('../../fonts/iconfont.eot?t=1500451929261#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../fonts/iconfont.woff?t=1500451929261') format('woff'), /* chrome, firefox */ url('../../fonts/iconfont.ttf?t=1500451929261') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../../fonts/iconfont.svg?t=1500451929261#iconfont') format('svg'); /* iOS 4.1- */ 7 | } 8 | 9 | [class^="@{message-icon-prefix-cls}"], [class*=" @{message-icon-prefix-cls}"] { 10 | font-family: "iconfont" !important; 11 | font-size: 16px; 12 | font-style: normal; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .@{message-icon-prefix-cls} { 18 | &--success { 19 | color: @message-success-color; 20 | &:before { 21 | content: "\e8e4"; 22 | } 23 | } 24 | &--error { 25 | color: @message-danger-color; 26 | &:before { 27 | content: "\e8e7"; 28 | } 29 | } 30 | &--info { 31 | color: @message-info-color; 32 | &:before { 33 | content: "\e8ea"; 34 | } 35 | } 36 | &--warning { 37 | color: @message-warning-color; 38 | &:before { 39 | content: "\e8ec"; 40 | } 41 | } 42 | &--loading { 43 | color: #bfcbd9; 44 | animation: rotating 1s linear infinite; 45 | &:before { 46 | content: "\e8fd"; 47 | } 48 | } 49 | &--close { 50 | &:before { 51 | content: "\e8e8"; 52 | } 53 | } 54 | } 55 | 56 | @keyframes rotating { 57 | 0% { 58 | transform: rotateZ(0deg); 59 | } 60 | 61 | 100% { 62 | transform: rotateZ(360deg); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/styles/less/index.less: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "font"; 3 | @import "message"; -------------------------------------------------------------------------------- /src/styles/less/message.less: -------------------------------------------------------------------------------- 1 | @message-prefix-cls: ~"@{vm-prefix}message"; 2 | 3 | .@{message-prefix-cls} { 4 | position: fixed; 5 | left: 50%; 6 | top: 20px; 7 | transform: translateX(-50%); 8 | min-width: @message-min-width; 9 | padding: @message-padding; 10 | background-color: @color-white; 11 | box-sizing: border-box; 12 | box-shadow: @message-shadow; 13 | border-radius: @message-border-radius; 14 | transition: opacity .3s, transform .4s; 15 | overflow: hidden; 16 | 17 | &__group { 18 | position: relative; 19 | display: flex; 20 | height: 21px; 21 | align-items: center; 22 | } 23 | &__inner { 24 | margin: 0 34px 0 0; 25 | font-size: 14px; 26 | white-space: nowrap; 27 | color: @message-content-color; 28 | text-align: justify; 29 | } 30 | 31 | &__icon { 32 | display: inline-block; 33 | vertical-align: middle; 34 | margin-right: 8px; 35 | } 36 | 37 | &__close { 38 | position: absolute; 39 | top: 0; 40 | right: 0; 41 | color: @message-close-color; 42 | font-size: 21px; 43 | cursor: pointer; 44 | 45 | &:hover { 46 | color: @message-close-hover-color; 47 | } 48 | } 49 | 50 | &-fade-enter, 51 | &-fade-leave-active { 52 | opacity: 0; 53 | transform: translate(-50%, -100%); 54 | } 55 | } -------------------------------------------------------------------------------- /src/utils/util.js: -------------------------------------------------------------------------------- 1 | const hasOwnProperty = Object.prototype.hasOwnProperty 2 | export function hasOwn (obj, key) { 3 | return hasOwnProperty.call(obj, key) 4 | } 5 | 6 | export function isVNode (node) { 7 | return typeof node === 'object' && hasOwn(node, 'componentOptions') 8 | } 9 | --------------------------------------------------------------------------------