diff --git a/index.html b/index.html
index ccea0c3..adbf23a 100644
--- a/index.html
+++ b/index.html
@@ -49,12 +49,12 @@
-
+
Vue-notice
A notice plug-in for Vue
-
+
Installation
import Vue from 'vue'
@@ -124,6 +124,9 @@ Advanced Usage
+
diff --git a/package.json b/package.json
index c25e5f0..e90fc70 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
{
"name": "vue-notice",
- "version": "0.2.1",
+ "version": "0.2.3",
"description": "A notice plug-in for Vue",
"main": "script/index.js",
"repository": "https://github.com/coolzjy/vue-notice",
"scripts": {
+ "prepublish": "rollup -c",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Zhang Visper",
@@ -13,6 +14,7 @@
"vue": "^1.0.0"
},
"devDependencies": {
+ "rollup": "^0.26.3",
"vue": "^1.0.0"
}
}
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..dca9742
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,6 @@
+export default {
+ entry: 'script/index.src.js',
+ format: 'umd',
+ moduleName: 'VueNotice',
+ dest: 'script/index.js'
+};
diff --git a/script/index.js b/script/index.js
index 53d9908..560942f 100644
--- a/script/index.js
+++ b/script/index.js
@@ -103,7 +103,7 @@
}).bind(this), curDuration)
}
- return {
+ var index_src = {
install: function (Vue, options) {
// apply global customized duration
if (options) {
@@ -138,4 +138,6 @@
}
}
-}));
+ return index_src;
+
+}));
\ No newline at end of file
diff --git a/script/index.src.js b/script/index.src.js
new file mode 100644
index 0000000..f510cde
--- /dev/null
+++ b/script/index.src.js
@@ -0,0 +1,133 @@
+var baseStyle = {
+ position: 'fixed',
+ zIndex: '9999',
+ top: '0',
+ right: '10px',
+ left: '10px',
+ padding: '8px 16px',
+ borderBottomLeftRadius: '4px',
+ borderBottomRightRadius: '4px',
+ background: 'white',
+ textAlign: 'center',
+ boxShadow: 'rgba(0, 0, 0, 0.2) 0px 2px 12px 4px',
+ transition: 'opacity 0.5s'
+}
+
+var hideStyle = {
+ opacity: '0'
+}
+
+var showStyle = {
+ opacity: '1'
+}
+
+var themes = {
+ success: {
+ background: '#A5D6A7',
+ color: '#1B5E20'
+ },
+
+ info: {
+ background: '#90CAF9',
+ color: '#0D47A1'
+ },
+
+ warning: {
+ background: '#FFF59D',
+ color: '#F57F17'
+ },
+
+ error: {
+ background: '#F48FB1',
+ color: '#880E4F'
+ }
+}
+
+var duration = 5000
+
+function applyStyle (el, styleObj) {
+ for (var style in styleObj) {
+ if (styleObj.hasOwnProperty(style)) {
+ el.style[style] = styleObj[style]
+ }
+ }
+}
+
+function applyTheme (el, name) {
+ if (themes[name]) {
+ applyStyle(el, themes[name])
+ }
+}
+
+function Notice (content, options) {
+ this.div = document.createElement('div')
+ this.div.innerHTML = content
+ applyStyle(this.div, baseStyle)
+ applyStyle(this.div, hideStyle)
+ var curDuration = duration
+
+ // options
+ if (options !== undefined) {
+ if (typeof options === 'object') {
+ if (typeof options.duration === 'number') {
+ curDuration = options.duration
+ }
+ if (typeof options.style === 'object') {
+ applyStyle(this.div, options.style)
+ } else if (typeof options.style === 'string') {
+ applyTheme(this.div, options.style)
+ }
+ }
+ if (typeof options === 'string') {
+ applyTheme(this.div, options)
+ }
+ }
+
+ document.body.appendChild(this.div)
+
+ // make sure brower has render style above
+ window.getComputedStyle(this.div).opacity
+ applyStyle(this.div, showStyle)
+
+ setTimeout((function () {
+ applyStyle(this.div, hideStyle)
+ setTimeout((function () {
+ document.body.removeChild(this.div)
+ }).bind(this), 500)
+ }).bind(this), curDuration)
+}
+
+export default {
+ install: function (Vue, options) {
+ // apply global customized duration
+ if (options) {
+ if (typeof options.duration === 'number') {
+ duration = options.duration
+ }
+
+ // apply global customized style
+ if (typeof options.style === 'object') {
+ for (var style in options.style) {
+ if (options.style.hasOwnProperty(style)) {
+ baseStyle[style] = options.style[style]
+ }
+ }
+ }
+
+ // apply global customized themes
+ // the customized theme will override default theme
+ if (typeof options.themes === 'object') {
+ for (var theme in options.themes) {
+ if (options.themes.hasOwnProperty(theme)) {
+ themes[theme] = options.themes[theme]
+ }
+ }
+ }
+ }
+
+ // inject $notice into Vue instance
+ Vue.prototype.$notice = function (content, options) {
+ new Notice(content, options)
+ }
+ }
+}
diff --git a/style/index.css b/style/index.css
index c89025c..2ee9183 100644
--- a/style/index.css
+++ b/style/index.css
@@ -2,6 +2,10 @@
margin: 10px;
}
+header {
+ text-align: center;
+}
+
h1 {
font-family: 'Dosis', 'Sans-serif';
font-weight: normal;
@@ -16,3 +20,8 @@ code {
button {
margin-bottom: 5px;
}
+
+footer {
+ margin-top: 20px;
+ text-align: center;
+}