zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

use babel-preset-env

This commit is contained in:
Pan 2017-06-19 17:59:56 +08:00
parent cf1fb6cd4d
commit e97dbf6115
4 changed files with 126 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.babelrc
View File

@ -1,5 +1,8 @@
{ {
"presets": ["es2015", "stage-2"], "presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"], "plugins": ["transform-runtime"],
"comments": false "comments": false
} }

2
package.json
View File

@ -43,7 +43,7 @@
"babel-eslint": "7.2.3", "babel-eslint": "7.2.3",
"babel-loader": "7.0.0", "babel-loader": "7.0.0",
"babel-plugin-transform-runtime": "6.23.0", "babel-plugin-transform-runtime": "6.23.0",
"babel-preset-es2015": "6.24.1", "babel-preset-env": "1.5.2",
"babel-preset-stage-2": "6.24.1", "babel-preset-stage-2": "6.24.1",
"babel-register": "6.24.1", "babel-register": "6.24.1",
"chalk": "1.1.3", "chalk": "1.1.3",

160
src/directive/sticky.js
View File

@ -1,99 +1,91 @@
(function() { const vueSticky = {};
const vueSticky = {}; let listenAction;
let listenAction; vueSticky.install = Vue => {
vueSticky.install = Vue => { Vue.directive('sticky', {
Vue.directive('sticky', { inserted(el, binding) {
inserted(el, binding) { const params = binding.value || {},
const params = binding.value || {}, stickyTop = params.stickyTop || 0,
stickyTop = params.stickyTop || 0, zIndex = params.zIndex || 1000,
zIndex = params.zIndex || 1000, elStyle = el.style;
elStyle = el.style;
elStyle.position = '-webkit-sticky'; elStyle.position = '-webkit-sticky';
elStyle.position = 'sticky'; elStyle.position = 'sticky';
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary） // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
// if (~elStyle.position.indexOf('sticky')) { // if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`; // elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex; // elStyle.zIndex = zIndex;
// return // return
// } // }
const elHeight = el.getBoundingClientRect().height; const elHeight = el.getBoundingClientRect().height;
const elWidth = el.getBoundingClientRect().width; const elWidth = el.getBoundingClientRect().width;
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`; elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
const parentElm = el.parentNode || document.documentElement; const parentElm = el.parentNode || document.documentElement;
const placeholder = document.createElement('div'); const placeholder = document.createElement('div');
placeholder.style.display = 'none';
placeholder.style.width = `${elWidth}px`;
placeholder.style.height = `${elHeight}px`;
parentElm.insertBefore(placeholder, el)
let active = false;
const getScroll = (target, top) => {
const prop = top ? 'pageYOffset' : 'pageXOffset';
const method = top ? 'scrollTop' : 'scrollLeft';
let ret = target[prop];
if (typeof ret !== 'number') {
ret = window.document.documentElement[method];
}
return ret;
};
const sticky = () => {
if (active) {
return
}
if (!elStyle.height) {
elStyle.height = `${el.offsetHeight}px`
}
elStyle.position = 'fixed';
elStyle.width = `${elWidth}px`;
placeholder.style.display = 'inline-block';
active = true
};
const reset = () => {
if (!active) {
return
}
elStyle.position = '';
placeholder.style.display = 'none'; placeholder.style.display = 'none';
placeholder.style.width = `${elWidth}px`; active = false;
placeholder.style.height = `${elHeight}px`; };
parentElm.insertBefore(placeholder, el)
let active = false; const check = () => {
const scrollTop = getScroll(window, true);
const getScroll = (target, top) => { const offsetTop = el.getBoundingClientRect().top;
const prop = top ? 'pageYOffset' : 'pageXOffset'; if (offsetTop < stickyTop) {
const method = top ? 'scrollTop' : 'scrollLeft'; sticky();
let ret = target[prop]; } else {
if (typeof ret !== 'number') { if (scrollTop < elHeight + stickyTop) {
ret = window.document.documentElement[method]; reset()
} }
return ret; }
}; };
listenAction = () => {
check()
};
const sticky = () => { window.addEventListener('scroll', listenAction)
if (active) { },
return
}
if (!elStyle.height) {
elStyle.height = `${el.offsetHeight}px`
}
elStyle.position = 'fixed'; unbind() {
elStyle.width = `${elWidth}px`; window.removeEventListener('scroll', listenAction)
placeholder.style.display = 'inline-block'; }
active = true })
}; };
const reset = () => { export default vueSticky
if (!active) {
return
}
elStyle.position = '';
placeholder.style.display = 'none';
active = false;
};
const check = () => {
const scrollTop = getScroll(window, true);
const offsetTop = el.getBoundingClientRect().top;
if (offsetTop < stickyTop) {
sticky();
} else {
if (scrollTop < elHeight + stickyTop) {
reset()
}
}
};
listenAction = () => {
check()
};
window.addEventListener('scroll', listenAction)
},
unbind() {
window.removeEventListener('scroll', listenAction)
}
})
};
if (typeof exports == 'object') {
module.exports = vueSticky
} else if (typeof define == 'function' && define.amd) {
define([], () => vueSticky)
} else if (window.Vue) {
window.vueSticky = vueSticky;
Vue.use(vueSticky)
}
}());

97
src/directive/waves.js
View File

@ -1,54 +1,47 @@
import './waves.css'; import './waves.css';
(function() {
const vueWaves = {}; const vueWaves = {};
vueWaves.install = (Vue, options = {}) => { vueWaves.install = (Vue, options = {}) => {
Vue.directive('waves', { Vue.directive('waves', {
bind(el, binding) { bind(el, binding) {
el.addEventListener('click', e => { el.addEventListener('click', e => {
const customOpts = Object.assign(options, binding.value); const customOpts = Object.assign(options, binding.value);
const opts = Object.assign({ const opts = Object.assign({
ele: el, // 波纹作用元素 ele: el, // 波纹作用元素
type: 'hit', // hit点击位置扩散center中心点扩展 type: 'hit', // hit点击位置扩散center中心点扩展
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, customOpts), }, customOpts),
target = opts.ele; target = opts.ele;
if (target) { if (target) {
target.style.position = 'relative'; target.style.position = 'relative';
target.style.overflow = 'hidden'; target.style.overflow = 'hidden';
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
let ripple = target.querySelector('.waves-ripple'); let ripple = target.querySelector('.waves-ripple');
if (!ripple) { if (!ripple) {
ripple = document.createElement('span'); ripple = document.createElement('span');
ripple.className = 'waves-ripple'; ripple.className = 'waves-ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple); target.appendChild(ripple);
} else { } else {
ripple.className = 'waves-ripple'; ripple.className = 'waves-ripple';
} }
switch (opts.type) { switch (opts.type) {
case 'center': case 'center':
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
break; break;
default: default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
} }
ripple.style.backgroundColor = opts.color; ripple.style.backgroundColor = opts.color;
ripple.className = 'waves-ripple z-active'; ripple.className = 'waves-ripple z-active';
return false; return false;
} }
}, false); }, false);
} }
}) })
}; };
if (typeof exports == 'object') {
module.exports = vueWaves export default vueWaves;
} else if (typeof define == 'function' && define.amd) {
define([], () => vueWaves)
} else if (window.Vue) {
window.vueWaves = vueWaves;
Vue.use(vueWaves)
}
}());