Commit e97dbf61 authored by Pan's avatar Pan

use babel-preset-env

parent cf1fb6cd
{ {
"presets": ["es2015", "stage-2"], "presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"], "plugins": ["transform-runtime"],
"comments": false "comments": false
} }
(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.display = 'none';
placeholder.style.width = `${elWidth}px`; placeholder.style.width = `${elWidth}px`;
placeholder.style.height = `${elHeight}px`; placeholder.style.height = `${elHeight}px`;
parentElm.insertBefore(placeholder, el) parentElm.insertBefore(placeholder, el)
let active = false; let active = false;
const getScroll = (target, top) => { const getScroll = (target, top) => {
const prop = top ? 'pageYOffset' : 'pageXOffset'; const prop = top ? 'pageYOffset' : 'pageXOffset';
const method = top ? 'scrollTop' : 'scrollLeft'; const method = top ? 'scrollTop' : 'scrollLeft';
let ret = target[prop]; let ret = target[prop];
if (typeof ret !== 'number') { if (typeof ret !== 'number') {
ret = window.document.documentElement[method]; ret = window.document.documentElement[method];
} }
return ret; return ret;
}; };
const sticky = () => { const sticky = () => {
if (active) { if (active) {
return return
} }
if (!elStyle.height) { if (!elStyle.height) {
elStyle.height = `${el.offsetHeight}px` elStyle.height = `${el.offsetHeight}px`
} }
elStyle.position = 'fixed'; elStyle.position = 'fixed';
elStyle.width = `${elWidth}px`; elStyle.width = `${elWidth}px`;
placeholder.style.display = 'inline-block'; placeholder.style.display = 'inline-block';
active = true active = true
}; };
const reset = () => { const reset = () => {
if (!active) { if (!active) {
return return
} }
elStyle.position = ''; elStyle.position = '';
placeholder.style.display = 'none'; placeholder.style.display = 'none';
active = false; active = false;
}; };
const check = () => { const check = () => {
const scrollTop = getScroll(window, true); const scrollTop = getScroll(window, true);
const offsetTop = el.getBoundingClientRect().top; const offsetTop = el.getBoundingClientRect().top;
if (offsetTop < stickyTop) { if (offsetTop < stickyTop) {
sticky(); sticky();
} else { } else {
if (scrollTop < elHeight + stickyTop) { if (scrollTop < elHeight + stickyTop) {
reset() reset()
}
} }
}; }
listenAction = () => { };
check() listenAction = () => {
}; check()
};
window.addEventListener('scroll', listenAction)
},
window.addEventListener('scroll', listenAction) unbind() {
}, window.removeEventListener('scroll', listenAction)
}
})
};
unbind() { export default vueSticky
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)
}
}());
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.className = 'waves-ripple z-active';
return false;
} }
}, false); ripple.style.backgroundColor = opts.color;
} ripple.className = 'waves-ripple z-active';
}) return false;
}; }
if (typeof exports == 'object') { }, false);
module.exports = vueWaves }
} else if (typeof define == 'function' && define.amd) { })
define([], () => vueWaves) };
} else if (window.Vue) {
window.vueWaves = vueWaves; export default vueWaves;
Vue.use(vueWaves)
}
}());
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment