theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ci eslint

Browse Source
This commit is contained in:
就眠儀式
2021-12-25 00:09:30 +08:00
parent 6717dfead2
commit 93507d0165
126 changed files with 1028 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/module/popper/calcPosition.ts
View File

@@ -1,50 +1,73 @@
import { Ref } from "vue";
// 计算各个方向位置
const postionFns: any = {
top(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let {top, left, bottom} = el.getBoundingClientRect()
if ((top = top - popper.offsetHeight - 6) < 0 && bottom > popper.offsetHeight) {
innnerPosition.value = 'bottom';
top = bottom;
}
return {
top: `${top}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
}
},
bottom(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let { top, left, bottom } = el.getBoundingClientRect()
if (window.innerHeight - bottom < popper.offsetHeight + 6) {
innnerPosition.value = 'top';
bottom = top - popper.offsetHeight - 6;
}
return {
top: `${bottom}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
}
},
left(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called : boolean) {
let {top, left, right} = el.getBoundingClientRect()
left = left - popper.offsetWidth - 6;
if (left < 0) {
innnerPosition.value = 'right';
left = right;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${left}px`
}
},
right(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let { top, left, right } = el.getBoundingClientRect()
if (window.innerWidth < right + popper.offsetWidth + 6) {
innnerPosition.value = 'left';
right = left - popper.offsetWidth - 6;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${right}px`
}
top(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, bottom } = el.getBoundingClientRect();
if (
(top = top - popper.offsetHeight - 6) < 0 &&
bottom > popper.offsetHeight
) {
innnerPosition.value = "bottom";
top = bottom;
}
}
export default postionFns;
return {
top: `${top}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`,
};
},
bottom(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, bottom } = el.getBoundingClientRect();
if (window.innerHeight - bottom < popper.offsetHeight + 6) {
innnerPosition.value = "top";
bottom = top - popper.offsetHeight - 6;
}
return {
top: `${bottom}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`,
};
},
left(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, right } = el.getBoundingClientRect();
left = left - popper.offsetWidth - 6;
if (left < 0) {
innnerPosition.value = "right";
left = right;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${left}px`,
};
},
right(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, right } = el.getBoundingClientRect();
if (window.innerWidth < right + popper.offsetWidth + 6) {
innnerPosition.value = "left";
right = left - popper.offsetWidth - 6;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${right}px`,
};
},
};
export default postionFns;

84
src/module/popper/usePopper.ts
View File

@@ -1,43 +1,47 @@
import { h, ref, render, watchEffect, watch} from "vue";
import { h, ref, render, watchEffect, watch } from "vue";
import popper from "./index.vue";
import { once } from "../../tools/domUtil";
const EVENT_MAP : any = {
'hover': 'mouseenter',
'click': 'click'
}
const EVENT_MAP: any = {
hover: "mouseenter",
click: "click",
};
const usePopper = {
createPopper(el: HTMLElement, props: any, trigger : string) {
const _this = this;
once(el, EVENT_MAP[trigger], () => {
// TODO 临时解决方案
const _props:any = {el};
for (const key in props) {
_props[key] = ref(props[key]);
}
_props.updateVisible = function(val:boolean) {
_props.visible && (_props.visible.value = val);
}
_this.renderPopper(_props);
watchEffect(() => {
for (const key in _props) {
if (key === 'visible') {
continue;
}
_props[key].value = props[key];
}
});
watch(() => props.visible, (val: boolean)=> {
_props.updateVisible(val);
})
})
},
renderPopper(props: any) {
const container: HTMLDivElement = document.createElement("div");
// container.setAttribute("class", "lay-div");
const node = h(popper, props);
render(node, container);
container.firstElementChild && document.body.appendChild(container.firstElementChild);
return node;
}
}
export default usePopper;
createPopper(el: HTMLElement, props: any, trigger: string) {
const _this = this;
once(el, EVENT_MAP[trigger], () => {
// TODO 临时解决方案
const _props: any = { el };
for (const key in props) {
_props[key] = ref(props[key]);
}
_props.updateVisible = function (val: boolean) {
_props.visible && (_props.visible.value = val);
};
_this.renderPopper(_props);
watchEffect(() => {
for (const key in _props) {
if (key === "visible") {
continue;
}
_props[key].value = props[key];
}
});
watch(
() => props.visible,
(val: boolean) => {
_props.updateVisible(val);
}
);
});
},
renderPopper(props: any) {
const container: HTMLDivElement = document.createElement("div");
// container.setAttribute("class", "lay-div");
const node = h(popper, props);
render(node, container);
container.firstElementChild &&
document.body.appendChild(container.firstElementChild);
return node;
},
};
export default usePopper;