forked from opentiny/tiny-vue
Sync to dev 0127 (#1352)
* fix(pager): [pager] change pager content to unicode (#1251) * fix(build): fix build error and update versions * fix(build): update theme version * fix(vue): [grid] fix show icon condition (#1259) * docs(grid): [grid] fix grid docs (#1260) * docs(grid): [grid] fix grid docs * docs(grid): [grid] fix grid docs * fix(vue-common): fix process env error (#1277) * fix(vue-common): fix process env error * fix(vue-common): fix process env error * fix(vue-common): fix process env error * fix(modal): fix modal process env error * fix(select): [dialog-box, select] fix select async emit form validate (#1292) * fix(theme): x-design style css var fix (#1286) * fix(renderless): fix popper fixed offset in transform parent (#1332) * fix(vue): [cascader] fix search mode in wujie (#1319) --------- Co-authored-by: gimmyhehe <975402925@qq.com>
This commit is contained in:
parent
c35e1978cb
commit
b337171a03
|
@ -266,6 +266,7 @@ export const handleBlur =
|
|||
export const handleInput =
|
||||
({ api, state, refs }) =>
|
||||
(val, event) => {
|
||||
// TODO: window.event待整改
|
||||
event = event || window.event
|
||||
|
||||
if (!event) {
|
||||
|
|
|
@ -103,6 +103,24 @@ const isScrollElement = (el: HTMLElement) => {
|
|||
)
|
||||
}
|
||||
|
||||
/** 设置transform等样式后,fixed定位不再相对于视口,使用1X1PX透明元素获取fixed定位相对于视口的修正偏移量。 */
|
||||
const getAdjustOffset = (parent: HTMLElement) => {
|
||||
const placeholder = document.createElement('div')
|
||||
setStyle(placeholder, {
|
||||
opacity: 0,
|
||||
position: 'fixed',
|
||||
width: 1,
|
||||
height: 1,
|
||||
top: 0,
|
||||
left: 0,
|
||||
'z-index': '-99'
|
||||
})
|
||||
parent.appendChild(placeholder)
|
||||
const result = getBoundingClientRect(placeholder)
|
||||
parent.removeChild(placeholder)
|
||||
return result
|
||||
}
|
||||
|
||||
/** 查找滚动父元素,只找第一个就返回 */
|
||||
export const getScrollParent: (el: HTMLElement) => HTMLElement = (el) => {
|
||||
let parent = el.parentNode
|
||||
|
@ -126,11 +144,21 @@ export const getScrollParent: (el: HTMLElement) => HTMLElement = (el) => {
|
|||
}
|
||||
|
||||
/** 计算 el 在父元素中的定位 */
|
||||
const getOffsetRectRelativeToCustomParent = (el: HTMLElement, parent: HTMLElement, fixed: boolean) => {
|
||||
const getOffsetRectRelativeToCustomParent = (
|
||||
el: HTMLElement,
|
||||
parent: HTMLElement,
|
||||
fixed: boolean,
|
||||
popper: HTMLElement
|
||||
) => {
|
||||
let { top, left, width, height } = getBoundingClientRect(el)
|
||||
|
||||
// 如果是fixed定位,直接返回相对视口位置
|
||||
// 如果是fixed定位,需计算要修正的偏移量。
|
||||
if (fixed) {
|
||||
if (popper.parentElement) {
|
||||
const { top: adjustTop, left: adjustLeft } = getAdjustOffset(popper.parentElement)
|
||||
top -= adjustTop
|
||||
left -= adjustLeft
|
||||
}
|
||||
return {
|
||||
top,
|
||||
left,
|
||||
|
@ -680,7 +708,12 @@ class Popper {
|
|||
let popperOffsets = { position: this.state.position } as PopperOffsets
|
||||
|
||||
let isParentFixed = popperOffsets.position === 'fixed'
|
||||
let referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed)
|
||||
let referenceOffsets = getOffsetRectRelativeToCustomParent(
|
||||
reference,
|
||||
getOffsetParent(popper),
|
||||
isParentFixed,
|
||||
popper
|
||||
)
|
||||
|
||||
// 利用 popperOuterSize 来减少一次outerSize的计算
|
||||
const { width, height } = this.popperOuterSize
|
||||
|
|
|
@ -82,8 +82,8 @@
|
|||
day.isLast || day.isNext || day.disabled
|
||||
? ''
|
||||
: isSelectedDate(day)
|
||||
? 'bg-color-brand-hover-subtle hover:bg-color-brand-hover-subtle'
|
||||
: 'hover:bg-color-brand-hover-subtler',
|
||||
? 'bg-color-brand-hover-subtle hover:bg-color-brand-hover-subtle'
|
||||
: 'hover:bg-color-brand-hover-subtler',
|
||||
gcls('bg-' + getDayBgColor(day))
|
||||
)
|
||||
"
|
||||
|
@ -103,8 +103,8 @@
|
|||
day.isLast || day.isNext
|
||||
? 'text-color-text-primary opacity-30'
|
||||
: isToday(day) || isSelectedDate(day)
|
||||
? 'text-color-brand'
|
||||
: 'text-color-text-primary',
|
||||
? 'text-color-brand'
|
||||
: 'text-color-text-primary',
|
||||
day.disabled ? 'text-color-none-hover' : ''
|
||||
)
|
||||
"
|
||||
|
|
|
@ -57,8 +57,8 @@
|
|||
day.isLast || day.isNext
|
||||
? 'is-next-or-last'
|
||||
: isToday(day) || isSelectedDate(day)
|
||||
? 'is-selected'
|
||||
: '',
|
||||
? 'is-selected'
|
||||
: '',
|
||||
day.disabled ? 'is-disabled' : ''
|
||||
]"
|
||||
>
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
:class="{ 'is-focus': state.dropDownVisible }"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@update:modelValue="handleInput"
|
||||
@update:modelValue="(val) => handleInput(val, {})"
|
||||
>
|
||||
<template #suffix>
|
||||
<icon-close
|
||||
|
|
Loading…
Reference in New Issue