Skip to content

Commit

Permalink
修复锁住滚动条无效问题 #29
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed Aug 25, 2024
1 parent e1921d6 commit 38bfc3a
Show file tree
Hide file tree
Showing 7 changed files with 159 additions and 86 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vxe-pc-ui",
"version": "4.1.5",
"version": "4.1.6-beta.0",
"description": "A vue based PC component library",
"scripts": {
"update": "npm install --legacy-peer-deps",
Expand Down
6 changes: 5 additions & 1 deletion packages/drawer/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'

import { VxeDrawerPropTypes, DrawerEventTypes, VxeDrawerDefines } from '../../types'

function openDrawer (options: VxeDrawerDefines.DrawerOptions): Promise<DrawerEventTypes> {
function handleDrawer (options: VxeDrawerDefines.DrawerOptions): Promise<DrawerEventTypes> {
// 使用动态组件渲染动态弹框
checkDynamic()
return new Promise(resolve => {
Expand Down Expand Up @@ -51,6 +51,10 @@ function closeDrawer (id?: VxeDrawerPropTypes.ID) {
return Promise.all(restPromises)
}

function openDrawer (options: VxeDrawerDefines.DrawerOptions) {
return handleDrawer(Object.assign({}, options))
}

export const DrawerController = {
get: getDrawer,
close: closeDrawer,
Expand Down
102 changes: 55 additions & 47 deletions packages/input/src/input.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue'
import { defineComponent, h, Teleport, ref, Ref, computed, reactive, onMounted, inject, nextTick, watch, onBeforeUnmount, PropType, createCommentVNode } from 'vue'
import XEUtils from 'xe-utils'
import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, VxeComponentStyleType } from '../../ui'
import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
Expand Down Expand Up @@ -1115,11 +1115,18 @@ export default defineComponent({
const isShiftKey = evnt.shiftKey
const isAltKey = evnt.altKey
const keyCode = evnt.keyCode
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) {
evnt.preventDefault()
}
if (controls) {
numberKeydownEvent(evnt)
if (isEsc) {
afterCheckValue()
} else if (isUpArrow || isDwArrow) {
if (controls) {
numberKeydownEvent(evnt)
}
}
}
triggerEvent(evnt)
Expand Down Expand Up @@ -2415,50 +2422,6 @@ export default defineComponent({

Object.assign($xeInput, inputMethods)

watch(() => props.modelValue, (val) => {
reactData.inputValue = val
changeValue()
})

watch(() => props.type, () => {
// 切换类型是重置内置变量
Object.assign(reactData, {
inputValue: props.modelValue,
datetimePanelValue: null,
datePanelValue: null,
datePanelLabel: '',
datePanelType: 'day',
selectMonth: null,
currentDate: null
})
initValue()
})

watch(computeDateLabelFormat, () => {
const isDatePickerType = computeIsDatePickerType.value
if (isDatePickerType) {
dateParseValue(reactData.datePanelValue)
reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel
}
})

nextTick(() => {
globalEvents.on($xeInput, 'mousewheel', handleGlobalMousewheelEvent)
globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent)
globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent)
globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent)
})

onUnmounted(() => {
numberStopDown()
globalEvents.off($xeInput, 'mousewheel')
globalEvents.off($xeInput, 'mousedown')
globalEvents.off($xeInput, 'keydown')
globalEvents.off($xeInput, 'blur')
})

initValue()

const renderVN = () => {
const { className, controls, type, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props
const { inputValue, visiblePanel, isActivated } = reactData
Expand Down Expand Up @@ -2538,6 +2501,51 @@ export default defineComponent({

$xeInput.renderVN = renderVN

watch(() => props.modelValue, (val) => {
reactData.inputValue = val
changeValue()
})

watch(() => props.type, () => {
// 切换类型是重置内置变量
Object.assign(reactData, {
inputValue: props.modelValue,
datetimePanelValue: null,
datePanelValue: null,
datePanelLabel: '',
datePanelType: 'day',
selectMonth: null,
currentDate: null
})
initValue()
})

watch(computeDateLabelFormat, () => {
const isDatePickerType = computeIsDatePickerType.value
if (isDatePickerType) {
dateParseValue(reactData.datePanelValue)
reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel
}
})

onMounted(() => {
globalEvents.on($xeInput, 'mousewheel', handleGlobalMousewheelEvent)
globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent)
globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent)
globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent)
})

onBeforeUnmount(() => {
numberStopDown()
afterCheckValue()
globalEvents.off($xeInput, 'mousewheel')
globalEvents.off($xeInput, 'mousedown')
globalEvents.off($xeInput, 'keydown')
globalEvents.off($xeInput, 'blur')
})

initValue()

return $xeInput
},
render () {
Expand Down
14 changes: 12 additions & 2 deletions packages/modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'

import { VxeModalPropTypes, ModalEventTypes, VxeModalDefines } from '../../types'

function openModal (options: VxeModalDefines.ModalOptions): Promise<ModalEventTypes> {
function handleModal (options: VxeModalDefines.ModalOptions): Promise<ModalEventTypes> {
// 使用动态组件渲染动态弹框
checkDynamic()
return new Promise(resolve => {
Expand Down Expand Up @@ -58,12 +58,19 @@ function handleOpen (defOpts: VxeModalDefines.ModalOptions, content: VxeModalPro
} else {
opts = { content: XEUtils.toValueString(content), title }
}
return openModal({ ...defOpts, ...options, ...opts })
return handleModal({ ...defOpts, ...options, ...opts })
}

function openModal (options: VxeModalDefines.ModalOptions) {
return handleOpen({
type: 'modal'
}, options)
}

function openAlert (content: VxeModalPropTypes.Content | VxeModalDefines.ModalOptions, title?: VxeModalPropTypes.Title, options?: VxeModalDefines.ModalOptions) {
return handleOpen({
type: 'alert',
lockScroll: true,
showHeader: true,
showFooter: true
}, content, title, options)
Expand All @@ -73,6 +80,7 @@ function openConfirm (content: VxeModalPropTypes.Content | VxeModalDefines.Modal
return handleOpen({
type: 'confirm',
status: 'question',
lockScroll: true,
showHeader: true,
showFooter: true
}, content, title, options)
Expand All @@ -83,6 +91,7 @@ function openMessage (content: VxeModalPropTypes.Content | VxeModalDefines.Modal
type: 'message',
mask: false,
lockView: false,
lockScroll: false,
showHeader: false
}, content, '', options)
}
Expand All @@ -92,6 +101,7 @@ function openNotification (content: VxeModalPropTypes.Content | VxeModalDefines.
type: 'notification',
mask: false,
lockView: false,
lockScroll: false,
showHeader: true,
draggable: false,
position: 'top-right',
Expand Down
36 changes: 36 additions & 0 deletions packages/modal/src/modal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ export default defineComponent({
emit('update:modelValue', false)
modalMethods.dispatchEvent('hide', params, null)
}, 200)
removeBodyLockScroll()
}
}).catch(e => e)
}
Expand Down Expand Up @@ -487,6 +488,39 @@ export default defineComponent({
}
}

const lockScrollAttrKey = 'data-vxe-lock-scroll'
const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width'

const removeBodyLockScroll = () => {
const htmlElem = document.documentElement
const lockData = htmlElem.getAttribute(lockScrollAttrKey)
if (lockData) {
const lockList = lockData.split(',').filter(key => key !== xID)
if (lockList.length) {
htmlElem.setAttribute(lockScrollAttrKey, lockList.join(','))
} else {
htmlElem.removeAttribute(lockScrollAttrKey)
htmlElem.style.removeProperty(lockScrollCssWidthKey)
}
}
}

const addBodyLockScroll = () => {
const { lockScroll } = props
const isMsg = computeIsMsg.value
if (lockScroll && !isMsg) {
const htmlElem = document.documentElement
const clientWidth = document.body.clientWidth
const lockData = htmlElem.getAttribute(lockScrollAttrKey)
const lockList = lockData ? lockData.split(',') : []
if (!lockList.includes(xID)) {
lockList.push(xID)
htmlElem.setAttribute(lockScrollAttrKey, lockList.join(','))
}
htmlElem.style.setProperty(lockScrollCssWidthKey, `${clientWidth}px`)
}
}

const openModal = () => {
const { remember, showFooter } = props
const { initialized, visible } = reactData
Expand All @@ -498,6 +532,7 @@ export default defineComponent({
if (!remember) {
recalculate()
}
addBodyLockScroll()
reactData.visible = true
reactData.contentVisible = false
updateZindex()
Expand Down Expand Up @@ -1226,6 +1261,7 @@ export default defineComponent({
onUnmounted(() => {
globalEvents.off($xeModal, 'keydown')
removeMsgQueue()
removeBodyLockScroll()
})

provide('$xeModal', $xeModal)
Expand Down
78 changes: 43 additions & 35 deletions packages/number-input/src/number-input.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, createCommentVNode, onUnmounted, PropType } from 'vue'
import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, onMounted, createCommentVNode, onBeforeUnmount, PropType } from 'vue'
import XEUtils from 'xe-utils'
import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui'
import { getFuncText } from '../../ui/src/utils'
Expand Down Expand Up @@ -96,7 +96,7 @@ export default defineComponent({
refInput: refInputTarget
}

const $xeInput = {
const $xeNumberInput = {
xID,
props,
context,
Expand Down Expand Up @@ -439,11 +439,18 @@ export default defineComponent({
const isShiftKey = evnt.shiftKey
const isAltKey = evnt.altKey
const keyCode = evnt.keyCode
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) {
evnt.preventDefault()
}
if (controls) {
numberKeydownEvent(evnt)
if (isEsc) {
afterCheckValue()
} else if (isUpArrow || isDwArrow) {
if (controls) {
numberKeydownEvent(evnt)
}
}
}
triggerEvent(evnt)
Expand Down Expand Up @@ -656,7 +663,7 @@ export default defineComponent({

inputMethods = {
dispatchEvent (type, params, evnt) {
emit(type, createEvent(evnt, { $input: $xeInput }, params))
emit(type, createEvent(evnt, { $input: $xeNumberInput }, params))
},

focus () {
Expand All @@ -679,34 +686,7 @@ export default defineComponent({
}
}

Object.assign($xeInput, inputMethods)

watch(() => props.modelValue, (val) => {
reactData.inputValue = val
})

watch(() => props.type, () => {
// 切换类型是重置内置变量
Object.assign(reactData, {
inputValue: props.modelValue
})
initValue()
})

nextTick(() => {
globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent)
globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent)
globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent)
})

onUnmounted(() => {
numberStopDown()
globalEvents.off($xeInput, 'mousedown')
globalEvents.off($xeInput, 'keydown')
globalEvents.off($xeInput, 'blur')
})

initValue()
Object.assign($xeNumberInput, inputMethods)

const renderVN = () => {
const { className, controls, type, align, name, autocomplete, autoComplete } = props
Expand Down Expand Up @@ -770,9 +750,37 @@ export default defineComponent({
])
}

$xeInput.renderVN = renderVN
$xeNumberInput.renderVN = renderVN

watch(() => props.modelValue, (val) => {
reactData.inputValue = val
})

watch(() => props.type, () => {
// 切换类型是重置内置变量
Object.assign(reactData, {
inputValue: props.modelValue
})
initValue()
})

onMounted(() => {
globalEvents.on($xeNumberInput, 'mousedown', handleGlobalMousedownEvent)
globalEvents.on($xeNumberInput, 'keydown', handleGlobalKeydownEvent)
globalEvents.on($xeNumberInput, 'blur', handleGlobalBlurEvent)
})

onBeforeUnmount(() => {
numberStopDown()
afterCheckValue()
globalEvents.off($xeNumberInput, 'mousedown')
globalEvents.off($xeNumberInput, 'keydown')
globalEvents.off($xeNumberInput, 'blur')
})

initValue()

return $xeInput
return $xeNumberInput
},
render () {
return this.renderVN()
Expand Down
Loading

0 comments on commit 38bfc3a

Please sign in to comment.