ant-design-vue/components/vc-util/Dom/css.ts
Zou Jian 5913cf9c5c
feat: add image (#3235)
* 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>
2020-12-18 18:02:51 +08:00

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),
};
}