Skip to content

Commit

Permalink
Add width and newline configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@lin-xin
lin-xin committed Jul 28, 2017
1 parent 10a8f72 commit 3c2b8e9
Show file tree
Hide file tree
Showing 4 changed files with 505 additions and 309 deletions.
19 changes: 16 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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:

Expand Down Expand Up @@ -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).
Expand Down
82 changes: 47 additions & 35 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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)
}
});
}
Expand Down
Loading

0 comments on commit 3c2b8e9

Please sign in to comment.