mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 05:29:01 +08:00
5913cf9c5c
* feat: 🆕 image组件 - 添加样式 * feat: 🆕 增加 AImage 组件 * feat: 🆕 参考 ant-design 增加 相关 Image 组件的less定义 * feat: 🆕 Image placeholder 的修改 * fix: 🐞 去除 onPreviewClose 相关 * test: 🧪 image width/height 以及相关测试 * fix: 🐞 fix lint no-setup-props-destructure * test: 🧪 image test snap file * refactor: 💡 去掉多加了的文件,重构文件以使逻辑清晰 * feat: 🆕 rc-image 相关内容 列入 vc-image 文件夹中 * feat: 🆕 antd 4.9.1 增加 image-preview-group * feat: 🆕 add ImagePropsType * feat: udpate image components * feat: update image * feat: update image Co-authored-by: tanjinzhou <415800467@qq.com>
116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/;
|
|
|
|
const removePixel = {
|
|
left: true,
|
|
top: true,
|
|
};
|
|
const floatMap = {
|
|
cssFloat: 1,
|
|
styleFloat: 1,
|
|
float: 1,
|
|
};
|
|
|
|
function getComputedStyle(node: HTMLElement) {
|
|
return node.nodeType === 1 ? node.ownerDocument.defaultView.getComputedStyle(node, null) : {};
|
|
}
|
|
|
|
function getStyleValue(node: HTMLElement, type: string, value: string) {
|
|
type = type.toLowerCase();
|
|
if (value === 'auto') {
|
|
if (type === 'height') {
|
|
return node.offsetHeight;
|
|
}
|
|
if (type === 'width') {
|
|
return node.offsetWidth;
|
|
}
|
|
}
|
|
if (!(type in removePixel)) {
|
|
removePixel[type] = PIXEL_PATTERN.test(type);
|
|
}
|
|
return removePixel[type] ? parseFloat(value) || 0 : value;
|
|
}
|
|
|
|
export function get(node: HTMLElement, name: any) {
|
|
const length = arguments.length;
|
|
const style = getComputedStyle(node);
|
|
|
|
name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name;
|
|
|
|
return length === 1 ? style : getStyleValue(node, name, style[name] || node.style[name]);
|
|
}
|
|
|
|
export function set(node: HTMLElement, name: any, value: string | number) {
|
|
const length = arguments.length;
|
|
name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name;
|
|
if (length === 3) {
|
|
if (typeof value === 'number' && PIXEL_PATTERN.test(name)) {
|
|
value = `${value}px`;
|
|
}
|
|
node.style[name as string] = value; // Number
|
|
return value;
|
|
}
|
|
for (const x in name) {
|
|
if (name.hasOwnProperty(x)) {
|
|
set(node, x, name[x]);
|
|
}
|
|
}
|
|
return getComputedStyle(node);
|
|
}
|
|
|
|
export function getOuterWidth(el: HTMLElement) {
|
|
if (el === document.body) {
|
|
return document.documentElement.clientWidth;
|
|
}
|
|
return el.offsetWidth;
|
|
}
|
|
|
|
export function getOuterHeight(el: HTMLElement) {
|
|
if (el === document.body) {
|
|
return window.innerHeight || document.documentElement.clientHeight;
|
|
}
|
|
return el.offsetHeight;
|
|
}
|
|
|
|
export function getDocSize() {
|
|
const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
|
|
const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
|
|
|
|
return {
|
|
width,
|
|
height,
|
|
};
|
|
}
|
|
|
|
export function getClientSize() {
|
|
const width = document.documentElement.clientWidth;
|
|
const height = window.innerHeight || document.documentElement.clientHeight;
|
|
return {
|
|
width,
|
|
height,
|
|
};
|
|
}
|
|
|
|
export function getScroll() {
|
|
return {
|
|
scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
|
|
scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop),
|
|
};
|
|
}
|
|
|
|
export function getOffset(node: any) {
|
|
const box = node.getBoundingClientRect();
|
|
const docElem = document.documentElement;
|
|
|
|
// < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
|
|
return {
|
|
left:
|
|
box.left +
|
|
(window.pageXOffset || docElem.scrollLeft) -
|
|
(docElem.clientLeft || document.body.clientLeft || 0),
|
|
top:
|
|
box.top +
|
|
(window.pageYOffset || docElem.scrollTop) -
|
|
(docElem.clientTop || document.body.clientTop || 0),
|
|
};
|
|
}
|