vxe-pc-ui 4.20.8 → 4.20.10

package/es/icon-picker/src/icon-picker.js

@@ -1,11 +1,14 @@
 import { h, Teleport, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui';
+import { VxeUI } from '../../ui';
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import VxeInputComponent from '../../input';
+import VxeScrollbarComponent from '../../scrollbar';
+const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI;
+const { getDefVal } = baseUtils;
 function createReactData() {
     return {
         initialized: false,
@@ -66,7 +69,12 @@ export default defineVxeComponent({
         transfer: {
             type: Boolean,
             default: null
-        }
+        },
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefVal(getConfig().iconPicker.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -82,7 +90,8 @@ export default defineVxeComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -200,6 +209,25 @@ export default defineVxeComponent({
             const iconList = computeIconList.value;
             return selectIcon ? iconList.find(item => item.icon === selectIcon) : null;
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig().iconPicker.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarProps = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: scrollbarOpts.className,
+                viewAttrs: scrollbarOpts.viewAttrs,
+                viewClassName: 'vxe-ico-picker--scrollbar-list-wrapper-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-ico-picker--scrollbar-list-wrapper-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const updateZindex = () => {
             if (reactData.panelIndex < getLastZIndex()) {
                 reactData.panelIndex = nextZIndex();
@@ -486,51 +514,59 @@ export default defineVxeComponent({
         const renderIconWrapper = () => {
             const { showIconTitle } = props;
             const { selectIcon, iconList } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
+            const scrollbarProps = computeScrollbarProps.value;
             if (!iconList.length) {
                 return h('div', {
                     class: 'vxe-ico-picker--empty-placeholder'
                 }, getI18n('vxe.iconPicker.emptyText'));
             }
+            const iconVNs = iconList.map(item => {
+                const { iconRender } = item;
+                const compConf = iconRender ? renderer.get(iconRender.name) : null;
+                const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
+                return h('div', {
+                    class: ['vxe-ico-picker--item', {
+                            'is--selected': selectIcon === item.icon
+                        }]
+                }, [
+                    h('div', {
+                        class: 'vxe-ico-picker--item-inner',
+                        onClick(evnt) {
+                            const isDisabled = computeIsDisabled.value;
+                            if (!isDisabled) {
+                                handleClickIconEvent(evnt, item);
+                            }
+                        }
+                    }, [
+                        h('div', {
+                            class: 'vxe-ico-picker--item-icon'
+                        }, iconMethod && iconRender
+                            ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
+                            : [
+                                h('i', {
+                                    class: item.icon || ''
+                                })
+                            ]),
+                        showIconTitle
+                            ? h('div', {
+                                class: 'vxe-ico-picker--item-title'
+                            }, `${item.title || ''}`)
+                            : renderEmptyElement($xeIconPicker)
+                    ])
+                ]);
+            });
+            if (isVScrollbar) {
+                return h(VxeScrollbarComponent, Object.assign({ class: 'vxe-ico-picker--scrollbar-list-wrapper' }, scrollbarProps), {
+                    default: () => iconVNs
+                });
+            }
             return h('div', {
                 class: 'vxe-ico-picker--list-wrapper'
             }, [
                 h('div', {
                     class: 'vxe-ico-picker--list'
-                }, iconList.map(item => {
-                    const { iconRender } = item;
-                    const compConf = iconRender ? renderer.get(iconRender.name) : null;
-                    const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
-                    return h('div', {
-                        class: ['vxe-ico-picker--item', {
-                                'is--selected': selectIcon === item.icon
-                            }]
-                    }, [
-                        h('div', {
-                            class: 'vxe-ico-picker--item-inner',
-                            onClick(evnt) {
-                                const isDisabled = computeIsDisabled.value;
-                                if (!isDisabled) {
-                                    handleClickIconEvent(evnt, item);
-                                }
-                            }
-                        }, [
-                            h('div', {
-                                class: 'vxe-ico-picker--item-icon'
-                            }, iconMethod && iconRender
-                                ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
-                                : [
-                                    h('i', {
-                                        class: item.icon || ''
-                                    })
-                                ]),
-                            showIconTitle
-                                ? h('div', {
-                                    class: 'vxe-ico-picker--item-title'
-                                }, `${item.title || ''}`)
-                                : renderEmptyElement($xeIconPicker)
-                        ])
-                    ]);
-                }))
+                }, iconVNs)
             ]);
         };
         const renderIconView = () => {

package/es/icon-picker/style.css

@@ -121,15 +121,21 @@
   color: var(--vxe-ui-font-primary-color);
 }
 
-.vxe-ico-picker--list-wrapper {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
   height: var(--vxe-ui-icon-picker-panel-height);
-  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
 
-.vxe-ico-picker--list {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper-view {
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.6em));
+}
+
+.vxe-ico-picker--list,
+.vxe-ico-picker--scrollbar-list-wrapper-inner {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

package/es/icon-picker/style.min.css

@@ -1 +1 @@
-.vxe-ico-picker,.vxe-ico-picker--panel{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker{position:relative;display:inline-block;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);height:var(--vxe-ui-ico-picker-current-height);line-height:var(--vxe-ui-ico-picker-current-height)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.3em));padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--item{display:flex;flex-direction:column;width:var(--vxe-ui-icon-picker-item-width,25%);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:var(--vxe-ui-icon-picker-panel-icon-font-size)}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);text-align:left;width:20em}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker--empty-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .6em;text-align:center;min-height:4em}
+.vxe-ico-picker,.vxe-ico-picker--panel{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker{position:relative;display:inline-block;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);height:var(--vxe-ui-ico-picker-current-height);line-height:var(--vxe-ui-ico-picker-current-height)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--list-wrapper,.vxe-ico-picker--scrollbar-list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list-wrapper,.vxe-ico-picker--scrollbar-list-wrapper-view{max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.6em))}.vxe-ico-picker--list,.vxe-ico-picker--scrollbar-list-wrapper-inner{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--item{display:flex;flex-direction:column;width:var(--vxe-ui-icon-picker-item-width,25%);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:var(--vxe-ui-icon-picker-panel-icon-font-size)}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);text-align:left;width:20em}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker--empty-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .6em;text-align:center;min-height:4em}

package/es/layout-aside/src/layout-aside.js

@@ -1,7 +1,7 @@
 import { ref, h, reactive, computed, provide } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import { toCssUnit } from '../../ui/src/dom';
-import { getConfig, useSize, createEvent } from '../../ui';
+import { getConfig, useFns, createEvent } from '../../ui';
 import { getDefaultConfig } from '../../ui/src/utils';
 import XEUtils from 'xe-utils';
 import VxeLoadingComponent from '../../loading';
@@ -30,7 +30,8 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const refElem = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive({});
         const refMaps = {
             refElem
@@ -73,9 +74,10 @@ export default defineVxeComponent({
         const layoutAsidePrivateMethods = {};
         Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods);
         const renderVN = () => {
-            const { collapsed, loading, padding, useScrollbar } = props;
+            const { collapsed, loading, padding } = props;
             const varStyle = computeVarStyle.value;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const collapseOpts = computeCollapseOpts.value;
             const scrollbarOpts = computeScrollbarOpts.value;
             const { className, viewClassName, viewInnerClassName } = scrollbarOpts;
@@ -91,7 +93,7 @@ export default defineVxeComponent({
                     }],
                 style: varStyle
             }, [
-                useScrollbar
+                isVScrollbar
                     ? h(VxeScrollbarComponent, {
                         width: scrollbarOpts.width,
                         height: scrollbarOpts.height,

package/es/layout-body/src/layout-body.js

@@ -1,6 +1,6 @@
 import { ref, h, reactive, computed } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { getConfig, useSize, createEvent, renderEmptyElement } from '../../ui';
+import { getConfig, useFns, createEvent, renderEmptyElement } from '../../ui';
 import XEUtils from 'xe-utils';
 import { getDefaultConfig } from '../../ui/src/utils';
 import VxeLoadingComponent from '../../loading';
@@ -38,7 +38,8 @@ export default defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const backtopId = `vxe_layout_body_backtop_${xID}`;
         const refElem = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const internalData = createInternalData();
         const reactData = reactive(createReactData());
         const refMaps = {
@@ -90,7 +91,8 @@ export default defineVxeComponent({
         const layoutBodyPrivateMethods = {};
         Object.assign($xeLayoutBody, layoutBodyMethods, layoutBodyPrivateMethods);
         const renderVN = () => {
-            const { loading, padding, showBacktop, useScrollbar } = props;
+            const { loading, padding, showBacktop } = props;
+            const isVScrollbar = computeIsVScrollbar.value;
             const backtopOpts = computeBacktopOpts.value;
             const scrollbarProps = computeScrollbarProps.value;
             const vSize = computeSize.value;
@@ -116,7 +118,7 @@ export default defineVxeComponent({
                         'is--padding': padding
                     }]
             }, [
-                useScrollbar
+                isVScrollbar
                     ? h(VxeScrollbarComponent, scrollbarProps, {
                         default: () => defaultSlot ? defaultSlot({}) : []
                     })

package/es/layout-container/src/layout-container.js

@@ -1,11 +1,17 @@
 import { ref, h, reactive } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { getConfig, useSize, createEvent } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import XEUtils from 'xe-utils';
+const { getConfig, baseUtils, createEvent } = VxeUI;
+const { getDefVal } = baseUtils;
 export default defineVxeComponent({
     name: 'VxeLayoutContainer',
     props: {
         vertical: Boolean,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefVal(getConfig().layoutContainer.useScrollbar, getConfig().useScrollbar)
+        },
         size: {
             type: String,
             default: () => getConfig().layoutContainer.size || getConfig().size
@@ -16,13 +22,15 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const refElem = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive({});
         const refMaps = {
             refElem
         };
         const computeMaps = {
-            computeSize
+            computeSize,
+            computeIsVScrollbar
         };
         const $xeLayoutContainer = {
             xID,