Add width and newline configuration

Author: lin-xin

README.md

@@ -1,5 +1,5 @@
 # vue2-toast
-A mobile toast plugin for vue2.(can't work in Nuxt.js/SSR)
+A mobile toast plugin for vue2.
 
 <p>
   <a href="https://www.npmjs.com/package/vue2-toast"><img src="https://img.shields.io/npm/dm/vue2-toast.svg" alt="Downloads"></a>
@@ -20,6 +20,17 @@ import 'vue2-toast/lib/toast.css';
 import Toast from 'vue2-toast';
 Vue.use(Toast);
 ```
+or
+```javascript
+import 'vue2-toast/lib/toast.css';
+import Toast from 'vue2-toast';
+Vue.use(Toast, {
+    defaultType: 'center',
+    duration: 3000,
+    wordWrap: true,
+    width: '150px'
+});
+```
 
 Use in component:
 
@@ -74,8 +85,10 @@ build: {
 
     Vue.use(Toast, [options])
 
-- defaultType : position of Toast. | default: 'bottom' | possible 'top, center,bottom'
-- duration : default 2500ms
+- defaultType : position of Toast. | String | default: 'bottom' | possible 'top, center,bottom'
+- duration : Number | default 2500ms
+- wordWrap : word wrap. | Boolean | default: false
+- width : width of Toast. | String | default: 'auto'
 
 ## source code
 download in [Github](https://github.com/lin-xin/vue-toast).

lib/index.js

@@ -1,66 +1,78 @@
 /**
- * Updated by linxin on 2017/7/5.
+ * Updated by linxin on 2017/7/27.
  */
 var Toast = {};
-var showToast = false,      // 存储toast显示状态
-    showLoad = false,       // 存储loading显示状态
-    loadNode = null;        // 存储loading节点元素
+var showToast = false, // 存储toast显示状态
+    showLoad = false, // 存储loading显示状态
+    toastVM = null, // 存储toast vm
+    loadNode = null; // 存储loading节点元素
 
 Toast.install = function (Vue, options) {
+
     var opt = {
-        defaultType:'bottom',
-        duration:'2500'
+        defaultType: 'bottom',
+        duration: '2500',
+        wordWrap: false
     };
-    for(var property in options){
+    for (var property in options) {
         opt[property] = options[property];
     }
-    Vue.prototype.$toast = function(tips,type){
+
+    Vue.prototype.$toast = function (tips, type) {
 
         var curType = type ? type : opt.defaultType;
+        var wordWrap = opt.wordWrap ? 'lx-word-wrap' : '';
+        var style = opt.width ? 'style="width: ' + opt.width + '"' : '';
+        var tmp = '<div v-show="show" :class="type" class="lx-toast ' + wordWrap + '" ' + style + '>{{tip}}</div>';
 
-        if(showToast){
+        if (showToast) {
             // 如果toast还在，则不再执行
             return;
         }
-        var toastTpl = Vue.extend({
-            data: function(){
-                return {
-                    show: showToast
-                }
-            },
-            template: '<div v-show="show" class="lx-toast lx-toast-'+ curType +'">' + tips + '</div>'
-        });
-        var vm = new toastTpl()
-        var tpl = vm.$mount().$el;
-
-        document.body.appendChild(tpl);
-        vm.show = showToast = true;
+        if (!toastVM) {
+            var toastTpl = Vue.extend({
+                data: function () {
+                    return {
+                        show: showToast,
+                        tip: tips,
+                        type: 'lx-toast-' + curType
+                    }
+                },
+                template: tmp
+            });
+            toastVM = new toastTpl()
+            var tpl = toastVM.$mount().$el;
+            document.body.appendChild(tpl);
+        }
+        toastVM.type = 'lx-toast-' + curType;
+        toastVM.tip = tips;
+        toastVM.show = showToast = true;
 
         setTimeout(function () {
-            vm.show = showToast = false;
+            toastVM.show = showToast = false;
         }, opt.duration)
     };
-    ['bottom', 'center', 'top'].forEach(function(type) {
-        Vue.prototype.$toast[type] = function(tips) {
-            return Vue.prototype.$toast(tips,type)
+    ['bottom', 'center', 'top'].forEach(function (type) {
+        Vue.prototype.$toast[type] = function (tips) {
+            return Vue.prototype.$toast(tips, type)
         }
     });
 
-    Vue.prototype.$loading = function(tips,type) {
-        if(type == 'close'){
+    Vue.prototype.$loading = function (tips, type) {
+        if (type == 'close') {
             loadNode.show = showLoad = false;
-        }else{
-            if(showLoad){
+        } else {
+            if (showLoad) {
                 // 如果loading还在，则不再执行
                 return;
             }
             var loadTpl = Vue.extend({
-                data: function(){
+                data: function () {
                     return {
                         show: showLoad
                     }
                 },
-                template: '<div v-show="show" class="lx-load-mark"><div class="lx-load-box"><div class="lx-loading"><div class="loading_leaf loading_leaf_0"></div><div class="loading_leaf loading_leaf_1"></div><div class="loading_leaf loading_leaf_2"></div><div class="loading_leaf loading_leaf_3"></div><div class="loading_leaf loading_leaf_4"></div><div class="loading_leaf loading_leaf_5"></div><div class="loading_leaf loading_leaf_6"></div><div class="loading_leaf loading_leaf_7"></div><div class="loading_leaf loading_leaf_8"></div><div class="loading_leaf loading_leaf_9"></div><div class="loading_leaf loading_leaf_10"></div><div class="loading_leaf loading_leaf_11"></div></div><div class="lx-load-content">'+tips+'</div></div></div>'
+                template: '<div v-show="show" class="lx-load-mark"><div class="lx-load-box"><div class="lx-loading"><div class="loading_leaf loading_leaf_0"></div><div class="loading_leaf loading_leaf_1"></div><div class="loading_leaf loading_leaf_2"></div><div class="loading_leaf loading_leaf_3"></div><div class="loading_leaf loading_leaf_4"></div><div class="loading_leaf loading_leaf_5"></div><div class="loading_leaf loading_leaf_6"></div><div class="loading_leaf loading_leaf_7"></div><div class="loading_leaf loading_leaf_8"></div><div class="loading_leaf loading_leaf_9"></div><div class="loading_leaf loading_leaf_10"></div><div class="loading_leaf loading_leaf_11"></div></div><div class="lx-load-content">' + tips + '</div></div></div>'
             });
             loadNode = new loadTpl();
             var tpl = loadNode.$mount().$el;
@@ -70,9 +82,9 @@ Toast.install = function (Vue, options) {
         }
     };
 
-    ['open', 'close'].forEach(function(type) {
-        Vue.prototype.$loading[type] = function(tips) {
-            return Vue.prototype.$loading(tips,type)
+    ['open', 'close'].forEach(function (type) {
+        Vue.prototype.$loading[type] = function (tips) {
+            return Vue.prototype.$loading(tips, type)
         }
     });
 }