Skip to content

Commit 86c1612

Browse files
lin-xinlin-xin
authored
Merge pull request #20 from hectorqin/master
修改多次toast不忽略，修改template为render函数，支持runtime-only使用,支持单次toast自定义配置
2 parents 2abb118 + c521278 commit 86c1612

File tree

1 file changed

+101
-41
lines changed

1 file changed

+101
-41
lines changed

‎lib/index.js

Lines changed: 101 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,85 +2,145 @@
22
* Updated by linxin on 2017/7/27.
33
*/
44
var Toast = {};
5-
var showToast = false, // 存储toast显示状态
6-
showLoad = false, // 存储loading显示状态
5+
var toastTimer = false, // 存储toast定时器id
76
toastVM = null, // 存储toast vm
7+
showLoad = false, // 存储loading显示状态
88
loadNode = null; // 存储loading节点元素
99

1010
Toast.install = function (Vue, options) {
1111

1212
var opt = {
13-
defaultType: 'bottom',
13+
type: 'bottom',
1414
duration: '2500',
15-
wordWrap: false
15+
wordWrap: false,
16+
width: 'auto'
1617
};
1718
for (var property in options) {
1819
opt[property] = options[property];
1920
}
20-
21-
Vue.prototype.$toast = function (tips, type) {
22-
23-
var curType = type ? type : opt.defaultType;
24-
var wordWrap = opt.wordWrap ? 'lx-word-wrap' : '';
25-
var style = opt.width ? 'style="width: ' + opt.width + '"' : '';
26-
var tmp = '<div v-show="show" :class="type" class="lx-toast ' + wordWrap + '" ' + style + '>{{tip}}</div>';
27-
28-
if (showToast) {
29-
// 如果toast还在，则不再执行
30-
return;
21+
Vue.prototype.$toast = function (tip, config) {
22+
let options = JSON.parse(JSON.stringify(opt));
23+
if(typeof config === 'object'){
24+
for (var property in config) {
25+
options[property] = config[property];
26+
}
27+
}else if(config){
28+
options['type'] = config
29+
}
30+
if (toastTimer) {
31+
// 如果toast还在，则取消上次消失时间
32+
clearTimeout(toastTimer);
33+
toastVM.show = false;
3134
}
3235
if (!toastVM) {
3336
var toastTpl = Vue.extend({
3437
data: function () {
3538
return {
36-
show: showToast,
37-
tip: tips,
38-
type: 'lx-toast-' + curType
39+
show: false,
40+
tip: tip,
41+
wordWrap: options.wordWrap,
42+
type: options.type,
43+
extStyle: {
44+
width: options.width
45+
},
3946
}
4047
},
41-
template: tmp
48+
render(h) {
49+
if(!this.show) return
50+
return h(
51+
'div',
52+
{
53+
class: ['lx-toast', 'lx-toast-' + this.type, this.wordWrap?'lx-word-wrap':''],
54+
style: this.extStyle,
55+
show: this.show,
56+
domProps: {
57+
innerHTML: this.tip
58+
}
59+
}
60+
)
61+
}
4262
});
4363
toastVM = new toastTpl()
4464
var tpl = toastVM.$mount().$el;
4565
document.body.appendChild(tpl);
4666
}
47-
toastVM.type = 'lx-toast-' + curType;
48-
toastVM.tip = tips;
49-
toastVM.show = showToast = true;
5067

51-
setTimeout(function () {
52-
toastVM.show = showToast = false;
53-
}, opt.duration)
68+
toastVM.tip = tip;
69+
toastVM.wordWrap = options.wordWrap;
70+
toastVM.type = options.type;
71+
toastVM.extStyle.width = options.width;
72+
toastVM.show = true;
73+
74+
toastTimer = setTimeout(function () {
75+
toastVM.show = toastTimer = false;
76+
}, options.duration)
5477
};
5578
['bottom', 'center', 'top'].forEach(function (type) {
56-
Vue.prototype.$toast[type] = function (tips) {
57-
return Vue.prototype.$toast(tips, type)
79+
Vue.prototype.$toast[type] = function (tip, config) {
80+
config.type = type
81+
return Vue.prototype.$toast(tip, config)
5882
}
5983
});
6084

61-
Vue.prototype.$loading = function (tips, type) {
85+
Vue.prototype.$loading = function (tip, type) {
6286
if (type == 'close') {
63-
loadNode.show = showLoad = false;
64-
var markNode = document.querySelector('.lx-load-mark');
65-
if (markNode) {
66-
if (typeof markNode.remove === 'function') {
67-
markNode.remove();
68-
} else { // IE have not remove
69-
markNode.parentNode.removeChild(markNode);
70-
}
71-
}
87+
if(loadNode) loadNode.show = showLoad = false;
7288
} else {
73-
if (showLoad) {
74-
// 如果loading还在，则不再执行
89+
if (showLoad && loadNode) {
90+
loadNode.tip = tip
7591
return;
7692
}
7793
var loadTpl = Vue.extend({
7894
data: function () {
7995
return {
80-
show: showLoad
96+
show: false,
97+
tip: tip
8198
}
8299
},
83-
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>'
100+
render(h) {
101+
if(!this.show) return
102+
return h(
103+
'div',
104+
{
105+
attrs: {
106+
'class': 'lx-load-mark'
107+
},
108+
show: this.show
109+
},
110+
[
111+
h(
112+
'div',
113+
{
114+
attrs: {
115+
'class': 'lx-load-box'
116+
}
117+
},[
118+
h(
119+
'div',
120+
{
121+
attrs: {
122+
'class': 'lx-loading'
123+
}
124+
}, Array.apply(null, {length: 12}).map(function(value, index){
125+
return h('div', {attrs: {'class': 'loading_leaf loading_leaf_' + index}})
126+
})
127+
),
128+
h(
129+
'div',
130+
{
131+
attrs: {
132+
'class': 'lx-load-content'
133+
},
134+
domProps: {
135+
innerHTML: this.tip
136+
}
137+
}
138+
)
139+
]
140+
)
141+
]
142+
);
143+
}
84144
});
85145
loadNode = new loadTpl();
86146
var tpl = loadNode.$mount().$el;

0 commit comments

Comments
 (0)