feat: use rollup to build component
This commit is contained in:
陈嘉涵
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* v-clickoutside
|
||||
* @desc 点击元素外面才会触发的事件
|
||||
* @example
|
||||
* ```vue
|
||||
* <div v-clickoutside="handleClose">
|
||||
* ```
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
const clickoutsideContext = '@@clickoutsideContext';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
const documentHandler = function(e) {
|
||||
if (vnode.context && !el.contains(e.target)) {
|
||||
vnode.context[el[clickoutsideContext].methodName]();
|
||||
}
|
||||
};
|
||||
el[clickoutsideContext] = {
|
||||
documentHandler,
|
||||
methodName: binding.expression,
|
||||
arg: binding.arg || 'click'
|
||||
};
|
||||
!isServer && document.addEventListener(el[clickoutsideContext].arg, documentHandler);
|
||||
},
|
||||
|
||||
update(el, binding) {
|
||||
el[clickoutsideContext].methodName = binding.expression;
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
!isServer && document.removeEventListener(
|
||||
el[clickoutsideContext].arg,
|
||||
el[clickoutsideContext].documentHandler);
|
||||
},
|
||||
|
||||
install(Vue) {
|
||||
Vue.directive('clickoutside', {
|
||||
bind: this.bind,
|
||||
unbind: this.unbind
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1,101 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
|
||||
const trim = function(string) {
|
||||
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||
};
|
||||
|
||||
export function hasClass(el, cls) {
|
||||
if (!el || !cls) return false;
|
||||
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||
if (el.classList) {
|
||||
return el.classList.contains(cls);
|
||||
} else {
|
||||
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||
}
|
||||
};
|
||||
|
||||
export function addClass(el, cls) {
|
||||
if (!el) return;
|
||||
var curClass = el.className;
|
||||
var classes = (cls || '').split(' ');
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.add(clsName);
|
||||
} else {
|
||||
if (!hasClass(el, clsName)) {
|
||||
curClass += ' ' + clsName;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = curClass;
|
||||
}
|
||||
};
|
||||
|
||||
export function removeClass(el, cls) {
|
||||
if (!el || !cls) return;
|
||||
var classes = cls.split(' ');
|
||||
var curClass = ' ' + el.className + ' ';
|
||||
|
||||
for (var i = 0, j = classes.length; i < j; i++) {
|
||||
var clsName = classes[i];
|
||||
if (!clsName) continue;
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.remove(clsName);
|
||||
} else {
|
||||
if (hasClass(el, clsName)) {
|
||||
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!el.classList) {
|
||||
el.className = trim(curClass);
|
||||
}
|
||||
};
|
||||
export const once = function(el, event, fn) {
|
||||
var listener = function() {
|
||||
if (fn) {
|
||||
fn.apply(this, arguments);
|
||||
}
|
||||
off(el, event, listener);
|
||||
};
|
||||
on(el, event, listener);
|
||||
};
|
||||
|
||||
export const on = (function() {
|
||||
if (!isServer && document.addEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function(element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.attachEvent('on' + event, handler);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
export const off = (function() {
|
||||
if (!isServer && document.removeEventListener) {
|
||||
return function(element, event, handler) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, false);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function(element, event, handler) {
|
||||
if (element && event) {
|
||||
element.detachEvent('on' + event, handler);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
@@ -1,15 +0,0 @@
|
||||
export default function(target, ...sources) {
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
const source = sources[i] || {};
|
||||
for (const prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
const value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
@@ -1,82 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
export default {
|
||||
debounce(func, wait, immediate) {
|
||||
var timeout, args, context, timestamp, result;
|
||||
return function() {
|
||||
context = this;
|
||||
args = arguments;
|
||||
timestamp = new Date();
|
||||
var later = function() {
|
||||
var last = (new Date()) - timestamp;
|
||||
if (last < wait) {
|
||||
timeout = setTimeout(later, wait - last);
|
||||
} else {
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
};
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(later, wait);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
},
|
||||
|
||||
// 找到最近的触发滚动事件的元素
|
||||
getScrollEventTarget(element) {
|
||||
var currentNode = element;
|
||||
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
||||
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
|
||||
var overflowY = this.getComputedStyle(currentNode).overflowY;
|
||||
if (overflowY === 'scroll' || overflowY === 'auto') {
|
||||
return currentNode;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return window;
|
||||
},
|
||||
|
||||
// 判断元素是否被加入到页面节点内
|
||||
isAttached(element) {
|
||||
var currentNode = element.parentNode;
|
||||
while (currentNode) {
|
||||
if (currentNode.tagName === 'HTML') {
|
||||
return true;
|
||||
}
|
||||
if (currentNode.nodeType === 11) {
|
||||
return false;
|
||||
}
|
||||
currentNode = currentNode.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 获取滚动高度
|
||||
getScrollTop(element) {
|
||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||
},
|
||||
|
||||
// 设置滚动高度
|
||||
setScrollTop(element, value) {
|
||||
'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
|
||||
},
|
||||
|
||||
// 获取元素距离顶部高度
|
||||
getElementTop(element) {
|
||||
if (element === window) {
|
||||
return this.getScrollTop(window);
|
||||
}
|
||||
return element.getBoundingClientRect().top + this.getScrollTop(window);
|
||||
},
|
||||
|
||||
getVisibleHeight(element) {
|
||||
if (element === window) {
|
||||
return element.innerHeight;
|
||||
}
|
||||
|
||||
return element.getBoundingClientRect().height;
|
||||
},
|
||||
|
||||
getComputedStyle: !Vue.prototype.$isServer && document.defaultView.getComputedStyle.bind(document.defaultView)
|
||||
};
|
||||
@@ -1,100 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
var exportObj = {};
|
||||
|
||||
if (!Vue.prototype.$isServer) {
|
||||
var docStyle = document.documentElement.style;
|
||||
var engine;
|
||||
var translate3d = false;
|
||||
|
||||
if (window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
|
||||
engine = 'presto';
|
||||
} else if ('MozAppearance' in docStyle) {
|
||||
engine = 'gecko';
|
||||
} else if ('WebkitAppearance' in docStyle) {
|
||||
engine = 'webkit';
|
||||
} else if (typeof navigator.cpuClass === 'string') {
|
||||
engine = 'trident';
|
||||
}
|
||||
|
||||
var cssPrefix = { trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-' }[engine];
|
||||
|
||||
var vendorPrefix = { trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O' }[engine];
|
||||
|
||||
var helperElem = document.createElement('div');
|
||||
var perspectiveProperty = vendorPrefix + 'Perspective';
|
||||
var transformProperty = vendorPrefix + 'Transform';
|
||||
var transformStyleName = cssPrefix + 'transform';
|
||||
var transitionProperty = vendorPrefix + 'Transition';
|
||||
var transitionStyleName = cssPrefix + 'transition';
|
||||
var transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd';
|
||||
|
||||
if (helperElem.style[perspectiveProperty] !== undefined) {
|
||||
translate3d = true;
|
||||
}
|
||||
|
||||
var getTranslate = function(element) {
|
||||
var result = { left: 0, top: 0 };
|
||||
if (element === null || element.style === null) return result;
|
||||
|
||||
var transform = element.style[transformProperty];
|
||||
var matches = /translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/ig.exec(transform);
|
||||
if (matches) {
|
||||
result.left = +matches[1];
|
||||
result.top = +matches[3];
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var translateElement = function(element, x, y) {
|
||||
if (x === null && y === null) return;
|
||||
|
||||
if (element === null || element === undefined || element.style === null) return;
|
||||
|
||||
if (!element.style[transformProperty] && x === 0 && y === 0) return;
|
||||
|
||||
if (x === null || y === null) {
|
||||
var translate = getTranslate(element);
|
||||
if (x === null) {
|
||||
x = translate.left;
|
||||
}
|
||||
if (y === null) {
|
||||
y = translate.top;
|
||||
}
|
||||
}
|
||||
|
||||
cancelTranslateElement(element);
|
||||
|
||||
if (translate3d) {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ') translateZ(0px)';
|
||||
} else {
|
||||
element.style[transformProperty] += ' translate(' + (x ? (x + 'px') : '0px') + ',' + (y ? (y + 'px') : '0px') + ')';
|
||||
}
|
||||
};
|
||||
|
||||
var cancelTranslateElement = function(element) {
|
||||
if (element === null || element.style === null) return;
|
||||
|
||||
var transformValue = element.style[transformProperty];
|
||||
|
||||
if (transformValue) {
|
||||
transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
|
||||
element.style[transformProperty] = transformValue;
|
||||
}
|
||||
};
|
||||
|
||||
exportObj = {
|
||||
transformProperty: transformProperty,
|
||||
transformStyleName: transformStyleName,
|
||||
transitionProperty: transitionProperty,
|
||||
transitionStyleName: transitionStyleName,
|
||||
transitionEndProperty: transitionEndProperty,
|
||||
getElementTranslate: getTranslate,
|
||||
translateElement: translateElement,
|
||||
cancelTranslateElement: cancelTranslateElement
|
||||
};
|
||||
};
|
||||
|
||||
export default exportObj;
|
||||
|
||||
Reference in New Issue
Block a user