diff --git a/examples/views/select/Select.vue b/examples/views/select/Select.vue index 10cd2e428..d2ac45a97 100644 --- a/examples/views/select/Select.vue +++ b/examples/views/select/Select.vue @@ -5,6 +5,24 @@

+ + + + diff --git a/packages/pulldown/src/pulldown.js b/packages/pulldown/src/pulldown.js index ed698d218..498c2aa79 100644 --- a/packages/pulldown/src/pulldown.js +++ b/packages/pulldown/src/pulldown.js @@ -56,9 +56,11 @@ export default { GlobalEvent.off(this, 'blur') }, render (h) { - const { $scopedSlots, inited, className, popupClassName, vSize, destroyOnClose, transfer, isActivated, disabled, animatVisible, visiblePanel, panelStyle, panelPlacement } = this + const { _e, $scopedSlots, inited, className, popupClassName, vSize, destroyOnClose, transfer, isActivated, disabled, animatVisible, visiblePanel, panelStyle, panelPlacement } = this const defaultSlot = $scopedSlots.default - const downSlot = $scopedSlots.dropdown + const headerSlot = $scopedSlots.header + const footerSlot = $scopedSlots.footer + const dropdownSlot = $scopedSlots.dropdown return h('div', { class: ['vxe-pulldown', className ? (XEUtils.isFunction(className) ? className({ $pulldown: this }) : className) : '', { [`size--${vSize}`]: vSize, @@ -83,11 +85,21 @@ export default { placement: panelPlacement }, style: panelStyle - }, downSlot ? [ + }, [ h('div', { - class: 'vxe-pulldown--wrapper' - }, !inited || (destroyOnClose && !visiblePanel && !animatVisible) ? [] : downSlot.call(this, { $pulldown: this }, h)) - ] : []) + class: 'vxe-pulldown--panel-wrapper' + }, !inited || (destroyOnClose && !visiblePanel && !animatVisible) ? [] : [ + headerSlot ? h('div', { + class: 'vxe-pulldown--panel-header' + }, headerSlot.call(this, { $pulldown: this })) : _e(), + h('div', { + class: 'vxe-pulldown--panel-body' + }, dropdownSlot ? dropdownSlot.call(this, { $pulldown: this }, h) : []), + footerSlot ? h('div', { + class: 'vxe-pulldown--panel-footer' + }, footerSlot.call(this, { $pulldown: this })) : _e() + ]) + ]) ]) }, methods: { diff --git a/packages/select/src/select.js b/packages/select/src/select.js index 362370d61..55ed8150e 100644 --- a/packages/select/src/select.js +++ b/packages/select/src/select.js @@ -139,8 +139,9 @@ function checkOptionDisabled (_vm, isSelected, option, group) { } export function renderOption (h, _vm, list, group) { - const { isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm + const { $scopedSlots, isGroup, labelField, valueField, optionKey, value, multiple, currentValue, optionOpts } = _vm const { useKey } = optionOpts + const optionSlot = $scopedSlots.option return list.map((option, cIndex) => { const { slots } = option const optionValue = option[valueField] @@ -149,6 +150,7 @@ export function renderOption (h, _vm, list, group) { const isDisabled = checkOptionDisabled(_vm, isSelected, option, group) const optid = getOptid(_vm, option) const defaultSlot = slots ? slots.default : null + const optParams = { option, group: null, $select: _vm } return isVisible ? h('div', { key: useKey || optionKey ? optid : cIndex, class: ['vxe-select-option', option.className, { @@ -172,18 +174,20 @@ export function renderOption (h, _vm, list, group) { } } } - }, defaultSlot ? _vm.callSlot(defaultSlot, { option, $select: _vm }, h) : UtilTools.formatText(getFuncText(option[labelField]))) : null + }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : UtilTools.formatText(getFuncText(option[labelField])))) : null }) } export function renderOptgroup (h, _vm) { - const { optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm + const { $scopedSlots, optionKey, visibleGroupList, groupLabelField, groupOptionsField, optionOpts } = _vm const { useKey } = optionOpts + const optionSlot = $scopedSlots.option return visibleGroupList.map((group, gIndex) => { const { slots } = group const optid = getOptid(_vm, group) const isGroupDisabled = group.disabled const defaultSlot = slots ? slots.default : null + const optParams = { option: group, group, $select: _vm } return h('div', { key: useKey || optionKey ? optid : gIndex, class: ['vxe-optgroup', group.className, { @@ -195,7 +199,7 @@ export function renderOptgroup (h, _vm) { }, [ h('div', { class: 'vxe-optgroup--title' - }, defaultSlot ? _vm.callSlot(defaultSlot, { option: group, $select: _vm }, h) : getFuncText(group[groupLabelField])), + }, optionSlot ? _vm.callSlot(optionSlot, optParams, h) : (defaultSlot ? _vm.callSlot(defaultSlot, optParams, h) : getFuncText(group[groupLabelField]))), h('div', { class: 'vxe-optgroup--wrapper' }, renderOption(h, _vm, group[groupOptionsField], group)) @@ -413,7 +417,10 @@ export default { }, render (h) { const { _e, $scopedSlots, vSize, className, popupClassName, inited, isActivated, loading, disabled, visiblePanel, filterable } = this + const defaultSlot = $scopedSlots.default const prefixSlot = $scopedSlots.prefix + const headerSlot = $scopedSlots.header + const footerSlot = $scopedSlots.footer return h('div', { class: ['vxe-select', className ? (XEUtils.isFunction(className) ? className({ $select: this }) : className) : '', { [`size--${vSize}`]: vSize, @@ -427,7 +434,7 @@ export default { h('div', { class: 'vxe-select-slots', ref: 'hideOption' - }, this.$slots.default), + }, defaultSlot ? defaultSlot.call(this, {}) : []), h('vxe-input', { ref: 'input', props: { @@ -448,7 +455,7 @@ export default { 'suffix-click': this.togglePanelEvent }, scopedSlots: prefixSlot ? { - prefix: () => prefixSlot({}) + prefix: () => prefixSlot.call(this, {}) } : {} }), h('div', { @@ -465,11 +472,11 @@ export default { style: this.panelStyle }, inited ? [ filterable ? h('div', { - class: 'vxe-select-filter--wrapper' + class: 'vxe-select--panel-search' }, [ h('vxe-input', { ref: 'inpSearch', - class: 'vxe-select-filter--input', + class: 'vxe-select-search--input', props: { value: this.searchValue, type: 'text', @@ -487,10 +494,24 @@ export default { }) ]) : _e(), h('div', { - ref: 'optWrapper', - class: 'vxe-select-option--wrapper' - }, renderOpts(h, this)) - ] : null) + class: 'vxe-select--panel-wrapper' + }, [ + headerSlot ? h('div', { + class: 'vxe-select--panel-header' + }, headerSlot.call(this, {})) : _e(), + h('div', { + class: 'vxe-select--panel-body' + }, [ + h('div', { + ref: 'optWrapper', + class: 'vxe-select-option--wrapper' + }, renderOpts(h, this)) + ]), + footerSlot ? h('div', { + class: 'vxe-select--panel-footer' + }, footerSlot.call(this, {})) : _e() + ]) + ] : []) ]) }, methods: { diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js index ecee2ee9c..db579e0bc 100644 --- a/packages/v-x-e-table/src/conf.js +++ b/packages/v-x-e-table/src/conf.js @@ -12,7 +12,7 @@ export default { showHeader: true, animat: true, delayHover: 250, - autoResize: false, + autoResize: true, minHeight: 144, // keepSource: false, // showOverflow: null, diff --git a/styles/pulldown.scss b/styles/pulldown.scss index 8750b371b..f67d4e440 100644 --- a/styles/pulldown.scss +++ b/styles/pulldown.scss @@ -38,8 +38,8 @@ transform: scaleY(1); } } -.vxe-pulldown--wrapper { - background-color: $vxe-pulldown-panel-background-color; +.vxe-pulldown--panel-wrapper { + background-color: var(--vxe-pulldown-panel-background-color); } .vxe-pulldown, diff --git a/styles/select.scss b/styles/select.scss index 76e304dae..5615ed38c 100644 --- a/styles/select.scss +++ b/styles/select.scss @@ -79,23 +79,40 @@ } } -.vxe-select-filter--wrapper { +.vxe-select--panel-search { display: block; - .vxe-select-filter--input { + .vxe-select-search--input { width: 100%; } } +.vxe-select--panel-wrapper { + position: relative; + border-radius: $vxe-border-radius; + border: 1px solid $vxe-table-popup-border-color; + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); + background-color: $vxe-select-panel-background-color; +} + +.vxe-select--panel-header { + border-bottom: 1px solid $vxe-table-popup-border-color; +} + +.vxe-select--panel-footer { + border-top: 1px solid $vxe-table-popup-border-color; +} + +.vxe-select--panel-header, +.vxe-select--panel-footer { + padding: 4px 0; +} + .vxe-select-option--wrapper { position: relative; overflow-x: hidden; overflow-y: auto; padding: 4px 0; max-height: 200px; - border-radius: $vxe-border-radius; - border: 1px solid $vxe-table-popup-border-color; - box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); - background-color: $vxe-select-panel-background-color; } .vxe-optgroup {