vxe-pc-ui 3.17.26 → 3.17.28

package/packages/modal/src/modal.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getI18n, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui'
-import { getDomNode, getEventTargetNode, getPopupAppendElement, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, getPopupAppendElement, getPopupWrapperElement, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils'
 import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
@@ -98,6 +98,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       default: () => getConfig().modal.confirmClosable
     },
     resize: Boolean as PropType<VxeModalPropTypes.Resize>,
+    border: {
+      type: Boolean as PropType<VxeModalPropTypes.Border>,
+      default: () => getConfig().modal.border
+    },
+    showTitleBackground: {
+      type: Boolean as PropType<VxeModalPropTypes.ShowTitleBackground>,
+      default: () => getConfig().modal.showTitleBackground
+    },
     showHeader: {
       type: Boolean as PropType<VxeModalPropTypes.ShowHeader>,
       default: () => getConfig().modal.showHeader
@@ -171,6 +179,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: [String, Function] as PropType<VxeModalPropTypes.AppendTo>,
       default: () => getConfig().modal.appendTo
     },
+    isWithinAppendTo: {
+      type: Boolean as PropType<VxeModalPropTypes.IsWithinAppendTo>,
+      default: () => getConfig().modal.isWithinAppendTo
+    },
     storage: {
       type: Boolean as PropType<VxeModalPropTypes.Storage>,
       default: () => getConfig().modal.storage
@@ -498,14 +510,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeModal
 
       return $xeModal.$nextTick().then(() => {
-        const { position } = props
-        const marginSize = XEUtils.toNumber(props.marginSize)
+        const { position, isWithinAppendTo } = props
+        const el = $xeModal.$refs.refElem as HTMLDivElement
         const boxElem = $xeModal.getBox()
         if (!boxElem) {
           return
         }
-        const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth
-        const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight
+        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body)
+        if (!parentWrapperEl) {
+          return
+        }
+        const clientVisibleWidth = parentWrapperEl.clientWidth
+        const clientVisibleHeight = parentWrapperEl.clientHeight
+        const marginSize = XEUtils.toNumber(props.marginSize)
         const isPosCenter = position === 'center'
         const { top, left } = XEUtils.isString(position) ? { top: position, left: position } : Object.assign({}, position)
         const topCenter = isPosCenter || top === 'center'
@@ -717,8 +734,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     handleMinimize  () {
       const $xeModal = this
+      const props = $xeModal
       const reactData = $xeModal.reactData
 
+      const { isWithinAppendTo } = props
       const zoomOpts = $xeModal.computeZoomOpts
       const { minimizeLayout, minimizeMaxSize, minimizeHorizontalOffset, minimizeVerticalOffset, minimizeOffsetMethod } = zoomOpts
       const isHorizontalLayout = minimizeLayout === 'horizontal'
@@ -751,6 +770,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData.prevZoomStatus = prevZoomStatus
       reactData.zoomStatus = 'minimize'
       return $xeModal.$nextTick().then(() => {
+        const el = $xeModal.$refs.refElem as HTMLDivElement
         const boxElem = $xeModal.getBox()
         if (!boxElem) {
           return {
@@ -763,7 +783,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
             status: false
           }
         }
-        const { visibleHeight } = getDomNode()
+        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body)
+        if (!parentWrapperEl) {
+          return {
+            status: false
+          }
+        }
+        const visibleHeight = parentWrapperEl.clientHeight
         // 如果当前处于复原状态
         if (!prevZoomStatus) {
           reactData.revertLocat = {
@@ -825,6 +851,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeModal
       const reactData = $xeModal.reactData
 
+      const { isWithinAppendTo } = props
       const prevZoomStatus = reactData.zoomStatus
       reactData.prevZoomStatus = prevZoomStatus
       reactData.zoomStatus = 'maximize'
@@ -833,9 +860,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
         if (boxElem) {
           // 如果当前处于复原状态
           if (!prevZoomStatus) {
+            const el = $xeModal.$refs.refElem as HTMLDivElement
+            const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body)
+            if (!parentWrapperEl) {
+              return {
+                status: false
+              }
+            }
+            const clientVisibleWidth = parentWrapperEl.clientWidth
+            const clientVisibleHeight = parentWrapperEl.clientHeight
             const marginSize = XEUtils.toNumber(props.marginSize)
-            const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth
-            const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight
             reactData.revertLocat = {
               top: Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2),
               left: Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2),
@@ -1115,7 +1149,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeModal
       const reactData = $xeModal.reactData
 
-      const { storage } = props
+      const { resize, storage, isWithinAppendTo } = props
       const { zoomStatus } = reactData
       const marginSize = XEUtils.toNumber(props.marginSize)
       const boxElem = $xeModal.getBox()
@@ -1124,9 +1158,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       if (zoomStatus !== 'maximize' && evnt.button === 0 && !getEventTargetNode(evnt, boxElem, 'trigger--btn').flag) {
         evnt.preventDefault()
+        const el = $xeModal.$refs.refElem as HTMLDivElement
+        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body)
+        if (!parentWrapperEl) {
+          return
+        }
+        const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0)
+        const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0)
         const disX = evnt.clientX - boxElem.offsetLeft
         const disY = evnt.clientY - boxElem.offsetTop
-        const { visibleHeight, visibleWidth } = getDomNode()
         document.onmousemove = evnt => {
           evnt.preventDefault()
           const offsetWidth = boxElem.offsetWidth
@@ -1176,8 +1216,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeModal.reactData
 
       evnt.preventDefault()
-      const { storage } = props
-      const { visibleHeight, visibleWidth } = getDomNode()
+      const { resize, storage, isWithinAppendTo } = props
+      const el = $xeModal.$refs.refElem as HTMLDivElement
+      const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body)
+      if (!parentWrapperEl) {
+        return
+      }
+      const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0)
+      const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0)
       const marginSize = XEUtils.toNumber(props.marginSize)
       const targetElem = evnt.target as HTMLSpanElement
       const type = targetElem.getAttribute('data-type')
@@ -1562,7 +1608,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeModal.$scopedSlots
       const reactData = $xeModal.reactData
 
-      const { slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize } = props
+      const { border, showTitleBackground, slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, isWithinAppendTo } = props
       const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData
       const asideSlot = slots.aside || propSlots.aside
       const vSize = $xeModal.computeSize
@@ -1575,10 +1621,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', {
+        class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', isWithinAppendTo ? 'ctx--within' : 'ctx--free', {
           [`size--${vSize}`]: vSize,
           [`status--${status}`]: status,
           'is--padding': padding,
+          'is--border': border,
+          'is--title-bg': showTitleBackground,
           'is--animat': animat,
           'lock--scroll': lockScroll,
           'lock--view': lockView,

package/packages/ui/index.ts

@@ -148,6 +148,8 @@ setConfig({
     // useHtml: false,
     position: 'right',
     showHeader: true,
+    // showTitleBackground: false,
+    border: true,
     lockView: true,
     mask: true,
     showTitleOverflow: true,
@@ -258,6 +260,8 @@ setConfig({
     // size: null,
     top: 16,
     showHeader: true,
+    // showTitleBackground: false,
+    border: true,
     // useHtml: false,
     // width: null,
     // height: null,

package/packages/ui/src/dom.ts

@@ -202,8 +202,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   const stys: Record<string, string> = {}
   if (panelElem && targetElem) {
     const bodyEl = document.body
-    const parentEl = panelElem.parentElement
-    const parentWrapperEl = parentEl === bodyEl ? document.documentElement : parentEl
+    const parentWrapperEl = getPopupWrapperElement(panelElem)
     if (parentWrapperEl) {
       const targetWidth = targetElem.offsetWidth
       const targetHeight = targetElem.offsetHeight
@@ -328,6 +327,15 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   }
 }
 
+export function getPopupWrapperElement (panelElem: HTMLElement | null | undefined) {
+  if (!panelElem) {
+    return null
+  }
+  const bodyEl = document.body
+  const parentEl = panelElem.parentElement
+  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
+}
+
 export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
   const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
   return selectElem || 'body'

package/styles/components/color-picker.scss

@@ -1,6 +1,34 @@
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
 
+// 局部变量
+.vxe-color-picker,
+.vxe-color-picker--readonly,
+.vxe-color-picker--panel {
+  --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-default);
+  &.size--xlarge {
+    --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-large);
+  }
+  &.size--medium {
+    --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-medium);
+  }
+  &.size--small {
+    --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-small);
+  }
+  &.size--mini {
+    --vxe-ui-color-picker-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-color-picker-current-height: var(--vxe-ui-input-height-mini);
+  }
+}
+
 .vxe-color-picker {
   &.is--selected {
     .vxe-color-picker--inner-color {
@@ -24,8 +52,10 @@
 
 .vxe-color-picker--inner,
 .vxe-color-picker--preview-btn,
-.vxe-color-picker--bar-alpha-slider {
-  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
+.vxe-color-picker--bar-alpha-slider,
+.vxe-color-picker--readonly-color.is--empty {
+  background-color: #ffffff;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
 }
 
 .vxe-color-picker--inner,
@@ -378,33 +408,12 @@
 
 .vxe-color-picker,
 .vxe-color-picker--readonly {
-  height: var(--vxe-ui-input-height-default);
-  line-height: var(--vxe-ui-input-height-default);
-  &.size--medium {
-    height: var(--vxe-ui-input-height-medium);
-    line-height: var(--vxe-ui-input-height-medium);
-  }
-  &.size--small {
-    height: var(--vxe-ui-input-height-small);
-    line-height: var(--vxe-ui-input-height-small);
-  }
-  &.size--mini {
-    height: var(--vxe-ui-input-height-mini);
-    line-height: var(--vxe-ui-input-height-mini);
-  }
+  height: var(--vxe-ui-color-picker-current-height);
+  line-height: var(--vxe-ui-color-picker-current-height);
 }
 
 .vxe-color-picker,
 .vxe-color-picker--readonly,
 .vxe-color-picker--panel {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
+  font-size: var(--vxe-ui-color-picker-current-font-size);
 }

package/styles/components/drawer.scss

@@ -128,7 +128,6 @@
   flex-direction: row;
   position: fixed;
   background-color: var(--vxe-ui-layout-background-color);
-  border: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: left;
   pointer-events: auto;
   opacity: 0;
@@ -204,7 +203,6 @@
   flex-shrink: 0;
   font-size: 1.1em;
   font-weight: 700;
-  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
   &.is--ellipsis {
     .vxe-drawer--header-title {
       overflow: hidden;
@@ -213,6 +211,21 @@
     }
   }
 }
+.vxe-drawer--wrapper {
+  &.is--title-bg {
+    .vxe-drawer--header {
+      background-color: var(--vxe-ui-drawer-header-background-color);
+    }
+  }
+  &.is--border {
+    .vxe-drawer--header {
+      border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+    }
+    .vxe-drawer--box {
+      border: 1px solid var(--vxe-ui-base-popup-border-color);
+    }
+  }
+}
 .vxe-drawer--header-title {
   flex-grow: 1;
   padding: 0.6em 0 0.6em 1em;

package/styles/components/modal.scss

@@ -13,7 +13,6 @@ html[data-vxe-lock-scroll] {
   width: 420px;
   background-color: var(--vxe-ui-layout-background-color);
   border-radius: var(--vxe-ui-base-border-radius);
-  border: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: left;
   pointer-events: auto;
   opacity: 0;
@@ -215,15 +214,48 @@ html[data-vxe-lock-scroll] {
 
 .vxe-modal--wrapper {
   display: none;
-  position: fixed;
   top: 0;
   left: 0;
   line-height: 1.5;
-  width: calc(100% + 18px);
-  height: calc(100% + 18px);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   outline: 0;
+  &.ctx--free {
+    width: calc(100% + 18px);
+    height: calc(100% + 18px);
+    position: fixed;
+    &.lock--view,
+    &.is--mask {
+      &:before {
+        position: fixed;
+      }
+    }
+    &.type--modal,
+    &.type--alert,
+    &.type--confirm {
+      .vxe-modal--box {
+        position: fixed;
+      }
+    }
+  }
+  &.ctx--within {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    &.lock--view,
+    &.is--mask {
+      &:before {
+        position: absolute;
+      }
+    }
+    &.type--modal,
+    &.type--alert,
+    &.type--confirm {
+      .vxe-modal--box {
+        position: absolute;
+      }
+    }
+  }
   &.is--active {
     display: block;
   }
@@ -303,7 +335,6 @@ html[data-vxe-lock-scroll] {
   &.is--mask {
     &:before {
       content: "";
-      position: fixed;
       top: 0;
       left: 0;
       width: 100%;
@@ -398,18 +429,26 @@ html[data-vxe-lock-scroll] {
   &.type--modal,
   &.type--alert,
   &.type--confirm {
+    &.is--title-bg {
+      .vxe-modal--header {
+        background-color: var(--vxe-ui-modal-header-background-color);
+      }
+    }
+    &.is--border {
+      .vxe-modal--header {
+        border-bottom: 1px solid var(--vxe-ui-input-border-color);
+      }
+      .vxe-modal--box {
+        border: 1px solid var(--vxe-ui-base-popup-border-color);
+      }
+    }
     .vxe-modal--box {
       display: flex;
       flex-direction: row;
-      position: fixed;
       left: 50%;
       top: 0;
       box-shadow: var(--vxe-ui-base-popup-box-shadow);
     }
-    .vxe-modal--header {
-      border-bottom: 1px solid var(--vxe-ui-input-border-color);
-      background-color: var(--vxe-ui-modal-header-background-color);
-    }
     .vxe-modal--body {
       overflow: auto;
       .vxe-modal--content {

package/styles/theme/dark.scss

@@ -66,8 +66,11 @@
   /*number-input*/
   --vxe-ui-number-input-control-button-color: #262727;
 
+  /*drawer*/
+  --vxe-ui-drawer-header-background-color: rgba(123, 123, 123, 0.1);
+
   /*modal*/
-  --vxe-ui-modal-header-background-color: var(--vxe-ui-layout-background-color);
+  --vxe-ui-modal-header-background-color: rgba(123, 123, 123, 0.1);
 
   /*tabs*/
   --vxe-ui-tabs-card-header-background-color: #1d1e1f;

package/styles/theme/light.scss

@@ -65,6 +65,9 @@
   /*number-input*/
   --vxe-ui-number-input-control-button-color: #f5f7fa;
   
+  /*drawer*/
+  --vxe-ui-drawer-header-background-color: #{light_variable.$vxe-ui-drawer-header-background-color};
+
   /*modal*/
   --vxe-ui-modal-header-background-color: #{light_variable.$vxe-ui-modal-header-background-color};
 

package/styles/variable.scss

@@ -58,6 +58,9 @@ $vxe-ui-input-border-color: #dcdfe6 !default;
 $vxe-ui-input-placeholder-color: #C0C4CC !default;
 $vxe-ui-input-disabled-background-color: #f3f3f3 !default;
 
+/*drawer*/
+$vxe-ui-drawer-header-background-color: #F8F8F8 !default;
+
 /*modal*/
 $vxe-ui-modal-header-background-color: #F8F8F8 !default;
 

package/types/components/drawer.d.ts

@@ -31,6 +31,7 @@ export namespace VxeDrawerPropTypes {
   export type ModelValue = boolean
   export type ID = string | null
   export type Loading = boolean
+  export type Border = boolean
   export type ClassName = string
   export type Position = DrawerPosition
   export type Title = string | number
@@ -54,6 +55,7 @@ export namespace VxeDrawerPropTypes {
   export type Width = number | string
   export type Height = number | string
   export type Resize = boolean
+  export type ShowTitleBackground = boolean
   export type ZIndex = number
   export type DestroyOnClose = boolean
   export type ShowTitleOverflow = boolean
@@ -69,6 +71,7 @@ export interface VxeDrawerProps {
   value?: VxeDrawerPropTypes.ModelValue
   id?: VxeDrawerPropTypes.ID
   loading?: VxeDrawerPropTypes.Loading
+  border?: VxeDrawerPropTypes.Border
   className?: VxeDrawerPropTypes.ClassName
   position?: VxeDrawerPropTypes.Position
   title?: VxeDrawerPropTypes.Title
@@ -85,6 +88,7 @@ export interface VxeDrawerProps {
   escClosable?: VxeDrawerPropTypes.EscClosable
   cancelClosable?: VxeDrawerPropTypes.CancelClosable
   confirmClosable?: VxeDrawerPropTypes.ConfirmClosable
+  showTitleBackground?: VxeDrawerPropTypes.ShowTitleBackground
   showHeader?: VxeDrawerPropTypes.ShowHeader
   showFooter?: VxeDrawerPropTypes.ShowFooter
   showClose?: VxeDrawerPropTypes.ShowClose

package/types/components/modal.d.ts

@@ -44,6 +44,7 @@ export namespace VxeModalPropTypes {
   export type Loading = boolean
   export type Status = ModalStatus
   export type IconStatus = string
+  export type Border = boolean
   export type ClassName = string
   export type Top = number | string
   export type Position = 'center' | 'top-left' | 'top-right' | ModalPosition
@@ -68,6 +69,7 @@ export namespace VxeModalPropTypes {
   export type CancelClosable = boolean
   export type ConfirmClosable = boolean
   export type Resize = boolean
+  export type ShowTitleBackground = boolean
   export type ShowHeader = boolean
   export type ShowFooter = boolean
   export type ShowZoom = boolean
@@ -109,6 +111,7 @@ export namespace VxeModalPropTypes {
   export type ShowTitleOverflow = boolean
   export type Transfer = boolean
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
+  export type IsWithinAppendTo = boolean
   export type Storage = boolean
   export type StorageKey = string
   export type Animat = boolean
@@ -127,6 +130,7 @@ export interface VxeModalProps {
   loading?: VxeModalPropTypes.Loading
   status?: VxeModalPropTypes.Status
   iconStatus?: VxeModalPropTypes.IconStatus
+  border?: VxeModalPropTypes.Border
   className?: VxeModalPropTypes.ClassName
   top?: VxeModalPropTypes.Top
   position?: VxeModalPropTypes.Position
@@ -146,6 +150,7 @@ export interface VxeModalProps {
   cancelClosable?: VxeModalPropTypes.CancelClosable
   confirmClosable?: VxeModalPropTypes.ConfirmClosable
   resize?: VxeModalPropTypes.Resize
+  showTitleBackground?: VxeModalPropTypes.ShowTitleBackground
   showHeader?: VxeModalPropTypes.ShowHeader
   showFooter?: VxeModalPropTypes.ShowFooter
   showZoom?: VxeModalPropTypes.ShowZoom
@@ -174,6 +179,10 @@ export interface VxeModalProps {
    * 挂载到指定元素下
    */
   appendTo?: VxeModalPropTypes.AppendTo
+  /**
+   * 是否在指定元素 append-to 的范围内显示
+   */
+  isWithinAppendTo?: VxeModalPropTypes.IsWithinAppendTo
   storage?: VxeModalPropTypes.Storage
   storageKey?: VxeModalPropTypes.StorageKey
   animat?: VxeModalPropTypes.Animat