Skip to content

Commit e97dbf6

Browse files
PanJiaChenPanJiaChen
committed
use babel-preset-env
1 parent cf1fb6c commit e97dbf6

File tree

4 files changed

+121
-133
lines changed

4 files changed

+121
-133
lines changed

‎.babelrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
2-
"presets": ["es2015", "stage-2"],
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-2"
5+
],
36
"plugins": ["transform-runtime"],
47
"comments": false
58
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"babel-eslint": "7.2.3",
4444
"babel-loader": "7.0.0",
4545
"babel-plugin-transform-runtime": "6.23.0",
46-
"babel-preset-es2015": "6.24.1",
46+
"babel-preset-env": "1.5.2",
4747
"babel-preset-stage-2": "6.24.1",
4848
"babel-register": "6.24.1",
4949
"chalk": "1.1.3",

‎src/directive/sticky.js‎

Lines changed: 72 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,91 @@
1-
(function() {
2-
const vueSticky = {};
3-
let listenAction;
4-
vueSticky.install = Vue => {
5-
Vue.directive('sticky', {
6-
inserted(el, binding) {
7-
const params = binding.value || {},
8-
stickyTop = params.stickyTop || 0,
9-
zIndex = params.zIndex || 1000,
10-
elStyle = el.style;
1+
const vueSticky = {};
2+
let listenAction;
3+
vueSticky.install = Vue => {
4+
Vue.directive('sticky', {
5+
inserted(el, binding) {
6+
const params = binding.value || {},
7+
stickyTop = params.stickyTop || 0,
8+
zIndex = params.zIndex || 1000,
9+
elStyle = el.style;
1110

12-
elStyle.position = '-webkit-sticky';
13-
elStyle.position = 'sticky';
11+
elStyle.position = '-webkit-sticky';
12+
elStyle.position = 'sticky';
1413
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
1514
// if (~elStyle.position.indexOf('sticky')) {
1615
// elStyle.top = `${stickyTop}px`;
1716
// elStyle.zIndex = zIndex;
1817
// return
1918
// }
20-
const elHeight = el.getBoundingClientRect().height;
21-
const elWidth = el.getBoundingClientRect().width;
22-
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
19+
const elHeight = el.getBoundingClientRect().height;
20+
const elWidth = el.getBoundingClientRect().width;
21+
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
2322

24-
const parentElm = el.parentNode || document.documentElement;
25-
const placeholder = document.createElement('div');
26-
placeholder.style.display = 'none';
27-
placeholder.style.width = `${elWidth}px`;
28-
placeholder.style.height = `${elHeight}px`;
29-
parentElm.insertBefore(placeholder, el)
23+
const parentElm = el.parentNode || document.documentElement;
24+
const placeholder = document.createElement('div');
25+
placeholder.style.display = 'none';
26+
placeholder.style.width = `${elWidth}px`;
27+
placeholder.style.height = `${elHeight}px`;
28+
parentElm.insertBefore(placeholder, el)
3029

31-
let active = false;
30+
let active = false;
3231

33-
const getScroll = (target, top) => {
34-
const prop = top ? 'pageYOffset' : 'pageXOffset';
35-
const method = top ? 'scrollTop' : 'scrollLeft';
36-
let ret = target[prop];
37-
if (typeof ret !== 'number') {
38-
ret = window.document.documentElement[method];
39-
}
40-
return ret;
41-
};
32+
const getScroll = (target, top) => {
33+
const prop = top ? 'pageYOffset' : 'pageXOffset';
34+
const method = top ? 'scrollTop' : 'scrollLeft';
35+
let ret = target[prop];
36+
if (typeof ret !== 'number') {
37+
ret = window.document.documentElement[method];
38+
}
39+
return ret;
40+
};
4241

43-
const sticky = () => {
44-
if (active) {
45-
return
46-
}
47-
if (!elStyle.height) {
48-
elStyle.height = `${el.offsetHeight}px`
49-
}
42+
const sticky = () => {
43+
if (active) {
44+
return
45+
}
46+
if (!elStyle.height) {
47+
elStyle.height = `${el.offsetHeight}px`
48+
}
5049

51-
elStyle.position = 'fixed';
52-
elStyle.width = `${elWidth}px`;
53-
placeholder.style.display = 'inline-block';
54-
active = true
55-
};
50+
elStyle.position = 'fixed';
51+
elStyle.width = `${elWidth}px`;
52+
placeholder.style.display = 'inline-block';
53+
active = true
54+
};
5655

57-
const reset = () => {
58-
if (!active) {
59-
return
60-
}
56+
const reset = () => {
57+
if (!active) {
58+
return
59+
}
6160

62-
elStyle.position = '';
63-
placeholder.style.display = 'none';
64-
active = false;
65-
};
61+
elStyle.position = '';
62+
placeholder.style.display = 'none';
63+
active = false;
64+
};
6665

67-
const check = () => {
68-
const scrollTop = getScroll(window, true);
69-
const offsetTop = el.getBoundingClientRect().top;
70-
if (offsetTop < stickyTop) {
71-
sticky();
72-
} else {
73-
if (scrollTop < elHeight + stickyTop) {
74-
reset()
75-
}
66+
const check = () => {
67+
const scrollTop = getScroll(window, true);
68+
const offsetTop = el.getBoundingClientRect().top;
69+
if (offsetTop < stickyTop) {
70+
sticky();
71+
} else {
72+
if (scrollTop < elHeight + stickyTop) {
73+
reset()
7674
}
77-
};
78-
listenAction = () => {
79-
check()
80-
};
75+
}
76+
};
77+
listenAction = () => {
78+
check()
79+
};
80+
81+
window.addEventListener('scroll', listenAction)
82+
},
8183

82-
window.addEventListener('scroll', listenAction)
83-
},
84+
unbind() {
85+
window.removeEventListener('scroll', listenAction)
86+
}
87+
})
88+
};
8489

85-
unbind() {
86-
window.removeEventListener('scroll', listenAction)
87-
}
88-
})
89-
};
90-
if (typeof exports == 'object') {
91-
module.exports = vueSticky
92-
} else if (typeof define == 'function' && define.amd) {
93-
define([], () => vueSticky)
94-
} else if (window.Vue) {
95-
window.vueSticky = vueSticky;
96-
Vue.use(vueSticky)
97-
}
98-
}());
90+
export default vueSticky
9991

‎src/directive/waves.js‎

Lines changed: 44 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,47 @@
11
import './waves.css';
2-
(function() {
3-
const vueWaves = {};
4-
vueWaves.install = (Vue, options = {}) => {
5-
Vue.directive('waves', {
6-
bind(el, binding) {
7-
el.addEventListener('click', e => {
8-
const customOpts = Object.assign(options, binding.value);
9-
const opts = Object.assign({
10-
ele: el, // 波纹作用元素
11-
type: 'hit', // hit点击位置扩散center中心点扩展
12-
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
13-
}, customOpts),
14-
target = opts.ele;
15-
if (target) {
16-
target.style.position = 'relative';
17-
target.style.overflow = 'hidden';
18-
const rect = target.getBoundingClientRect();
19-
let ripple = target.querySelector('.waves-ripple');
20-
if (!ripple) {
21-
ripple = document.createElement('span');
22-
ripple.className = 'waves-ripple';
23-
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
24-
target.appendChild(ripple);
25-
} else {
26-
ripple.className = 'waves-ripple';
27-
}
28-
switch (opts.type) {
29-
case 'center':
30-
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
31-
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
32-
break;
33-
default:
34-
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
35-
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
36-
}
37-
ripple.style.backgroundColor = opts.color;
38-
ripple.className = 'waves-ripple z-active';
39-
return false;
2+
3+
const vueWaves = {};
4+
vueWaves.install = (Vue, options = {}) => {
5+
Vue.directive('waves', {
6+
bind(el, binding) {
7+
el.addEventListener('click', e => {
8+
const customOpts = Object.assign(options, binding.value);
9+
const opts = Object.assign({
10+
ele: el, // 波纹作用元素
11+
type: 'hit', // hit点击位置扩散center中心点扩展
12+
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
13+
}, customOpts),
14+
target = opts.ele;
15+
if (target) {
16+
target.style.position = 'relative';
17+
target.style.overflow = 'hidden';
18+
const rect = target.getBoundingClientRect();
19+
let ripple = target.querySelector('.waves-ripple');
20+
if (!ripple) {
21+
ripple = document.createElement('span');
22+
ripple.className = 'waves-ripple';
23+
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
24+
target.appendChild(ripple);
25+
} else {
26+
ripple.className = 'waves-ripple';
27+
}
28+
switch (opts.type) {
29+
case 'center':
30+
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
31+
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
32+
break;
33+
default:
34+
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
35+
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
4036
}
41-
}, false);
42-
}
43-
})
44-
};
45-
if (typeof exports == 'object') {
46-
module.exports = vueWaves
47-
} else if (typeof define == 'function' && define.amd) {
48-
define([], () => vueWaves)
49-
} else if (window.Vue) {
50-
window.vueWaves = vueWaves;
51-
Vue.use(vueWaves)
52-
}
53-
}());
37+
ripple.style.backgroundColor = opts.color;
38+
ripple.className = 'waves-ripple z-active';
39+
return false;
40+
}
41+
}, false);
42+
}
43+
})
44+
};
45+
46+
export default vueWaves;
5447

0 commit comments

Comments
 (0)