├── .babelrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── README.md ├── dist ├── vue-message.js └── vue-message.js.map ├── index.html ├── npm-debug.log.2086417805 ├── package-lock.json ├── package.json ├── src ├── App.vue ├── favicon │ └── favicon.ico ├── lib │ ├── index.js │ └── message.vue └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=vue 2 | *.css linguist-language=vue 3 | *.html linguist-language=vue 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-message 2 | A prompt component based on vue2.0 3 | 4 | ## DEMO 5 | http://www.daiwei.org/components/vue-message 6 | 7 | ## How To Use 8 | * install vue-message plugin 9 |

10 |   npm install --save vue-message
11 |

12 | 13 | * main.js To Use 14 |

15 |     import Vue form 'vue'
16 |     import Msg from 'vue-message'
17 |     Vue.use(Msg, {
18 |       text: 'Hello world', duration: 3000, background: 'rgba(7,17,27,0.6)'
19 |     })
20 |

21 | * .vue To Use 22 |

23 |     // this.$toast('你好')    //  string  or object  (version  0 - 1.1.5)
24 |     this.$msg('Hello')        // ### 1.2.0 after 
25 | 	this.$msg({text:'未曾遗忘的青春', background: 'red'})
26 |

27 | 28 | ### 1.2.0 + ===> $msg 29 | ### 1.2.0 - ===> $toast 30 | 31 | 1.2.2 32 | update readme 33 | add demo link 34 | -------------------------------------------------------------------------------- /dist/vue-message.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VueMessage",[],t):"object"==typeof exports?exports.VueMessage=t():e.VueMessage=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";t.a={name:"Vue-Message",data:function(){return{text:"Hello World",position:"bottom",duration:3e3,background:"rgba(7,17,27,0.8)"}},mounted:function(){}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),o={showMessage:!1,showMessageNew:null,time:null,install:function(e,t){"undefined"!=typeof window&&window.Vue&&(e=window.Vue),e.component("Message",r.a),e.prototype.$msg=function(n,s){var a=r.a.data();for(var i in t)a[i]=t[i];if(!n instanceof Object)if(n)a.text=n;else for(var u in n)a[u]=n[u];else if("string"==typeof n)a.text=n;else for(var f in n)a[f]=n[f];if((o.showMessage||o.showMessageNew)&&(clearTimeout(o.time),o.showMessage=!1,document.body.removeChild(o.showMessageNew.$mount().$el),o.showMessageNew=null),!o.showMessageNew){var c=e.extend({template:'

'+a.text+"

",data:function(){return{isShow:o.showMessage}}});o.showMessageNew=new c;var d=o.showMessageNew.$mount().$el;document.body.appendChild(d),o.showMessageNew.isShow=o.showMessage=!0}o.time=setTimeout(function(){o.showMessageNew.isShow=o.showMessage=!1,"function"==typeof s&&s()},a.duration)}}};t.default=o},function(e,t,n){"use strict";function r(e){n(3)}var o=n(0),s=n(9),a=n(8),i=r,u=a(o.a,s.a,!1,i,null,null);t.a=u.exports},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(6)("5e3de1ae",r,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".vue-Message{position:fixed;opacity:1;z-index:10000000;width:100%;display:flex;align-items:center;justify-content:center}.vue-Message .vue-Message-Detail{cursor:default;box-sizing:border-box;display:inline-block;user-select:none;word-wrap:break-word;width:auto;max-width:80%;border-radius:8px;font-size:14px;color:#fff;line-height:1.5;font-family:SourceHanSansCN-Regular;padding:6px 12px}.vue-Message.bottom{bottom:10%;left:0;transform:translate(0)}.vue-Message.bottom.fade-up-enter{opacity:0;transform:translateY(10px)}.vue-Message.center{top:50%;left:0;transform:translateY(-50%)}.vue-Message.center.fade-up-enter{opacity:0;transform:translateY(calc(-50% + 10px))}.vue-Message.top{top:10%;left:0;transform:translate(0)}.vue-Message.top.fade-up-enter{opacity:0;transform:translateY(10px)}.vue-Message.fade-up-enter-to,.vue-Message.fade-up-leave-to{transition:all .3s ease}.vue-Message.fade-up-leave-to{opacity:0}",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var s=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([s]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;on.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o

' + opt.text + '

',\n\t\t\t\t\tdata: function data() {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tisShow: Message.showMessage\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\t// 创建实例，挂载到文档以后的地方\n\t\t\t\tMessage.showMessageNew = new MessageT();\n\t\t\t\tvar tpl = Message.showMessageNew.$mount().$el;\n\t\t\t\tdocument.body.appendChild(tpl);\n\t\t\t\tMessage.showMessageNew.isShow = Message.showMessage = true;\n\t\t\t}\n\n\t\t\tMessage.time = setTimeout(function () {\n\t\t\t\tMessage.showMessageNew.isShow = Message.showMessage = false;\n\t\t\t\tif (typeof callBack === 'function') {\n\t\t\t\t\tcallBack();\n\t\t\t\t}\n\t\t\t}, opt.duration);\n\t\t};\n\t}\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Message);\n\n/***/ }),\n/* 2 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_message_vue__ = __webpack_require__(0);\n/* unused harmony namespace reexport */\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_7e2632a4_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_message_vue__ = __webpack_require__(9);\nfunction injectStyle (ssrContext) {\n __webpack_require__(3)\n}\nvar normalizeComponent = __webpack_require__(8)\n/* script */\n\n\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_message_vue__[\"a\" /* default */],\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_7e2632a4_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_message_vue__[\"a\" /* default */],\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a \n\n\n// WEBPACK FOOTER //\n// src/lib/message.vue","import MyMessage from './message.vue'\n\nconst Message = {\n\tshowMessage: false,\n\tshowMessageNew: null,\n\ttime: null, \t// 定时器\n\tinstall (Vue, options) {\n\t\tif (typeof window !== 'undefined' && window.Vue) {\n\t\t\tVue = window.Vue\n\t\t}\n\t\tVue.component('Message', MyMessage)\n\n\t\tVue.prototype.$msg = (obj, callBack) => {\n\t\t\tlet opt = MyMessage.data()\n\n\t\t\t// 这是在main.js时将用户use的配置写入覆盖掉默认配置但这不是最高的配置信息\n\t\t\tfor (let property in options) {\n\t\t\t\topt[property] = options[property] // 使用 options 的配置\n\t\t\t}\n\n\t\t\t// 如果$msg 中没有参数就设置默认的参数信息\n\t\t\tif (!obj instanceof Object) {\n\t\t\t\t// alert(JSON.stringify(opt))\n\t\t\t\t// opt.text = obj ? obj : (options ? options.text : opt.text)\n\t\t\t\tif (obj) {\n\t\t\t\t\topt.text = obj\n\t\t\t\t} else {\n\t\t\t\t\tfor (let property in obj) {\n\t\t\t\t\t\topt[property] = obj[property]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (typeof obj === 'string') {\n\t\t\t\t\topt.text = obj\n\t\t\t\t} else {\n\t\t\t\t\t// 这是选择优先级最高的参数当最终的参数信息\n\t\t\t\t\tfor (let property in obj) {\n\t\t\t\t\t\topt[property] = obj[property] // 使用 obj 自己在$msg事实的配置\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (Message.showMessage || Message.showMessageNew) {\n\t\t\t\t// 如果Message还在，则先删除前一个Message 的信息以及定时器并充值默认信息\n\t\t\t\tclearTimeout(Message.time)\n\t\t\t\tMessage.showMessage = false\n\t\t\t\tdocument.body.removeChild(Message.showMessageNew.$mount().$el)\n\t\t\t\tMessage.showMessageNew = null\n\t\t\t}\n\t\t\tif (!Message.showMessageNew) {\n\t\t\t\t// 创建构造器，定义好提示信息的模板\n\t\t\t\tlet MessageT = Vue.extend({\n template: '

' + opt.text + '

',\n\t\t\t\t\tdata () {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tisShow: Message.showMessage\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t// 创建实例，挂载到文档以后的地方\n\t\t\t\tMessage.showMessageNew = new MessageT()\n\t\t\t\tlet tpl = Message.showMessageNew.$mount().$el\n\t\t\t\tdocument.body.appendChild(tpl)\n\t\t\t\tMessage.showMessageNew.isShow = Message.showMessage = true\n\t\t\t}\n\n\t\t\tMessage.time = setTimeout(function () {\n\t\t\t\tMessage.showMessageNew.isShow = Message.showMessage = false\n\t\t\t\tif (typeof callBack === 'function') {\n\t\t\t\t\tcallBack()\n\t\t\t\t}\n\t\t\t}, opt.duration)\n\t\t}\n\t}\n}\nexport default Message\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/index.js","function injectStyle (ssrContext) {\n require(\"!!vue-style-loader!css-loader!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-7e2632a4\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!sass-loader!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./message.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./message.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./message.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7e2632a4\\\",\\\"hasScoped\\\":false,\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./message.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/lib/message.vue\n// module id = 2\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a 134 | -------------------------------------------------------------------------------- /src/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/vue-message/8b69f55e8bbea80cc65309b27117dd12fba73778/src/favicon/favicon.ico -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | import MyMessage from './message.vue' 2 | 3 | const Message = { 4 | showMessage: false, 5 | showMessageNew: null, 6 | time: null, // 定时器 7 | install (Vue, options) { 8 | if (typeof window !== 'undefined' && window.Vue) { 9 | Vue = window.Vue 10 | } 11 | Vue.component('Message', MyMessage) 12 | 13 | Vue.prototype.$msg = (obj, callBack) => { 14 | let opt = MyMessage.data() 15 | 16 | // 这是在main.js时将用户use的配置写入覆盖掉默认配置但这不是最高的配置信息 17 | for (let property in options) { 18 | opt[property] = options[property] // 使用 options 的配置 19 | } 20 | 21 | // 如果$msg 中没有参数就设置默认的参数信息 22 | if (!obj instanceof Object) { 23 | // alert(JSON.stringify(opt)) 24 | // opt.text = obj ? obj : (options ? options.text : opt.text) 25 | if (obj) { 26 | opt.text = obj 27 | } else { 28 | for (let property in obj) { 29 | opt[property] = obj[property] 30 | } 31 | } 32 | } else { 33 | if (typeof obj === 'string') { 34 | opt.text = obj 35 | } else { 36 | // 这是选择优先级最高的参数当最终的参数信息 37 | for (let property in obj) { 38 | opt[property] = obj[property] // 使用 obj 自己在$msg事实的配置 39 | } 40 | } 41 | } 42 | if (Message.showMessage || Message.showMessageNew) { 43 | // 如果Message还在，则先删除前一个Message 的信息以及定时器并充值默认信息 44 | clearTimeout(Message.time) 45 | Message.showMessage = false 46 | document.body.removeChild(Message.showMessageNew.$mount().$el) 47 | Message.showMessageNew = null 48 | } 49 | if (!Message.showMessageNew) { 50 | // 创建构造器，定义好提示信息的模板 51 | let MessageT = Vue.extend({ 52 | template: '

' + opt.text + '

', 53 | data () { 54 | return { 55 | isShow: Message.showMessage 56 | } 57 | } 58 | }) 59 | // 创建实例，挂载到文档以后的地方 60 | Message.showMessageNew = new MessageT() 61 | let tpl = Message.showMessageNew.$mount().$el 62 | document.body.appendChild(tpl) 63 | Message.showMessageNew.isShow = Message.showMessage = true 64 | } 65 | 66 | Message.time = setTimeout(function () { 67 | Message.showMessageNew.isShow = Message.showMessage = false 68 | if (typeof callBack === 'function') { 69 | callBack() 70 | } 71 | }, opt.duration) 72 | } 73 | } 74 | } 75 | export default Message 76 | -------------------------------------------------------------------------------- /src/lib/message.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import VueMessage from './lib/index.js' 5 | Vue.use(VueMessage, {background: 'rgba(0,0,0,0.5)'}) 6 | 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/lib/index.js', 7 | // entry: './src/main.js', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: '', 11 | // filename: '[name]-[hash].js', 12 | filename: 'vue-message.js', 13 | library: 'VueMessage', // library指定的就是你使用require时的模块名，这里便是require("VueMessage") 14 | libraryTarget: 'umd', //libraryTarget会生成不同umd的代码，例如可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。 15 | umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.css$/, 21 | use: [ 22 | 'vue-style-loader', 23 | 'css-loader' 24 | ], 25 | }, 26 | { 27 | test: /\.scss$/, 28 | use: [ 29 | 'vue-style-loader', 30 | 'css-loader', 31 | 'sass-loader' 32 | ], 33 | }, 34 | { 35 | test: /\.sass$/, 36 | use: [ 37 | 'vue-style-loader', 38 | 'css-loader', 39 | 'sass-loader?indentedSyntax' 40 | ], 41 | }, 42 | { 43 | test: /\.vue$/, 44 | loader: 'vue-loader', 45 | options: { 46 | loaders: { 47 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 48 | // the "scss" and "sass" values for the lang attribute to the right configs here. 49 | // other preprocessors should work out of the box, no loader config like this necessary. 50 | 'scss': [ 51 | 'vue-style-loader', 52 | 'css-loader', 53 | 'sass-loader' 54 | ], 55 | 'sass': [ 56 | 'vue-style-loader', 57 | 'css-loader', 58 | 'sass-loader?indentedSyntax' 59 | ] 60 | } 61 | // other vue-loader options go here 62 | } 63 | }, 64 | { 65 | test: /\.js$/, 66 | loader: 'babel-loader', 67 | exclude: /node_modules/ 68 | }, 69 | { 70 | test: /\.(png|jpg|gif|svg)$/, 71 | loader: 'file-loader', 72 | options: { 73 | name: '[name].[ext]?[hash]' 74 | } 75 | } 76 | ] 77 | }, 78 | resolve: { 79 | alias: { 80 | 'vue$': 'vue/dist/vue.esm.js' 81 | }, 82 | extensions: ['*', '.js', '.vue', '.json'] 83 | }, 84 | devServer: { 85 | historyApiFallback: true, 86 | noInfo: true, 87 | overlay: true 88 | }, 89 | performance: { 90 | hints: false 91 | }, 92 | devtool: '#eval-source-map' 93 | } 94 | 95 | if (process.env.NODE_ENV === 'production') { 96 | module.exports.devtool = '#source-map' 97 | // http://vue-loader.vuejs.org/en/workflow/production.html 98 | module.exports.plugins = (module.exports.plugins || []).concat([ 99 | new webpack.DefinePlugin({ 100 | 'process.env': { 101 | NODE_ENV: '"production"' 102 | } 103 | }), 104 | new webpack.optimize.UglifyJsPlugin({ 105 | sourceMap: true, 106 | compress: { 107 | warnings: false 108 | } 109 | }), 110 | new webpack.LoaderOptionsPlugin({ 111 | minimize: true 112 | }) 113 | // new HtmlWebpackPlugin({ 114 | // filename: 'index.html', 115 | // template: 'index.html', 116 | // inject: true, 117 | // favicon: 'src/favicon/favicon.ico' 118 | // }) 119 | ]) 120 | } 121 | --------------------------------------------------------------------------------