From 8cbd2c0035cbe96706f7b1aa2082314b690e8879 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 2 Jun 2020 23:21:24 +0800 Subject: [PATCH] feat: update drawer --- antdv-demo | 2 +- components/_util/props-util.js | 15 ++++++++++++++- components/config-provider/index.jsx | 6 ++---- components/drawer/index.jsx | 25 ++++++------------------- components/vc-drawer/src/Drawer.js | 26 ++++++++++++++------------ examples/App.vue | 26 +++++++++++++++++++++----- 6 files changed, 58 insertions(+), 42 deletions(-) diff --git a/antdv-demo b/antdv-demo index f3b049411..adbfcd30a 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit f3b049411f17e556d8795f40d41bfadb471ae630 +Subproject commit adbfcd30aeb6c125defa35102ed659f1be03c672 diff --git a/components/_util/props-util.js b/components/_util/props-util.js index be296ad9a..52e40f70c 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -122,7 +122,16 @@ const getOptionProps = instance => { const { $props = {} } = instance; return filterProps($props); }; - +const getComponent = (instance, prop, options = instance, execute = true) => { + const temp = instance[prop]; + if (temp !== undefined) { + return typeof temp === 'function' && execute ? temp(options) : temp; + } else { + let com = instance.$slots[prop] || null; + com = execute && com ? com(options) : com; + return Array.isArray(com) && com.length === 1 ? com[0] : com; + } +}; const getComponentFromProp = (instance, prop, options = instance, execute = true) => { if (instance.$createElement) { const h = instance.$createElement; @@ -218,6 +227,9 @@ export function getEvents(child) { // } // return { ...events }; } +export function getEvent(child, event) { + return child.props && child.props[event]; +} // 获取 xxx.native 或者 原生标签 事件 export function getDataEvents(child) { @@ -338,6 +350,7 @@ export { hasProp, filterProps, getOptionProps, + getComponent, getComponentFromProp, getSlotOptions, slotHasProp, diff --git a/components/config-provider/index.jsx b/components/config-provider/index.jsx index 12a1b4c61..bb3df72c5 100644 --- a/components/config-provider/index.jsx +++ b/components/config-provider/index.jsx @@ -2,7 +2,6 @@ import { reactive, provide } from 'vue'; import PropTypes from '../_util/vue-types'; import { getComponentFromProp } from '../_util/props-util'; import defaultRenderEmpty from './renderEmpty'; -import Base from '../base'; import LocaleProvider, { ANT_MARK } from '../locale-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; @@ -85,9 +84,8 @@ export const ConfigConsumerProps = { }; /* istanbul ignore next */ -ConfigProvider.install = function(Vue) { - Vue.use(Base); - Vue.component(ConfigProvider.name, ConfigProvider); +ConfigProvider.install = function(app) { + app.component(ConfigProvider.name, ConfigProvider); }; export default ConfigProvider; diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx index c28f2439f..f7d70826f 100644 --- a/components/drawer/index.jsx +++ b/components/drawer/index.jsx @@ -5,12 +5,12 @@ import VcDrawer from '../vc-drawer/src'; import PropTypes from '../_util/vue-types'; import BaseMixin from '../_util/BaseMixin'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; -import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util'; +import { getComponent, getOptionProps } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; -import Base from '../base'; const Drawer = { name: 'ADrawer', + inheritAttrs: false, props: { closable: PropTypes.bool.def(true), destroyOnClose: PropTypes.bool, @@ -145,9 +145,7 @@ const Drawer = { }, renderHeader(prefixCls) { const { closable, headerStyle } = this.$props; - // TODO - // const title = getComponentFromProp(this, 'title'); - const title = null; + const title = getComponent(this, 'title'); if (!title && !closable) { return null; } @@ -220,13 +218,12 @@ const Drawer = { } else { offsetStyle.height = typeof height === 'number' ? `${height}px` : height; } - // TODO - // const handler = getComponentFromProp(this, 'handle') || false; - const handler = false; + const handler = getComponent(this, 'handle') || false; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('drawer', customizePrefixCls); const vcDrawerProps = { + ...this.$attrs, ...omit(rest, [ 'closable', 'destroyOnClose', @@ -256,22 +253,12 @@ const Drawer = { }), wrapStyle: this.getRcDrawerStyle(), }; - return ( - - {this.renderBody(prefixCls)} - - ); + return {this.renderBody(prefixCls)}; }, }; /* istanbul ignore next */ Drawer.install = function(app) { - app.use(Base); app.component(Drawer.name, Drawer); }; diff --git a/components/vc-drawer/src/Drawer.js b/components/vc-drawer/src/Drawer.js index c589d675b..8c3382d95 100644 --- a/components/vc-drawer/src/Drawer.js +++ b/components/vc-drawer/src/Drawer.js @@ -2,8 +2,7 @@ import classnames from 'classnames'; import { cloneVNode, withDirectives, Teleport, nextTick } from 'vue'; import antRef from '../../_util/ant-ref'; import BaseMixin from '../../_util/BaseMixin'; -import { initDefaultProps, getEvents, getListeners, getSlot } from '../../_util/props-util'; -// import { cloneElement } from '../../_util/vnode'; +import { initDefaultProps, getSlot } from '../../_util/props-util'; import getScrollBarSize from '../../_util/getScrollBarSize'; import { IDrawerProps } from './IDrawerPropTypes'; import KeyCode from '../../_util/KeyCode'; @@ -16,7 +15,6 @@ import { transformArguments, isNumeric, } from './utils'; -// import Portal from '../../_util/Portal'; function noop() {} @@ -27,9 +25,10 @@ const windowIsUndefined = !( window.document.createElement ); -// Vue.use(ref, { name: 'ant-ref' }); const Drawer = { + name: 'Drawer', mixins: [BaseMixin], + inheritAttrs: false, directives: { 'ant-ref': antRef }, props: initDefaultProps(IDrawerProps, { prefixCls: 'drawer', @@ -63,6 +62,9 @@ const Drawer = { this.preProps = { ...this.$props }; return { sOpen: open, + isOpenChange: undefined, + passive: undefined, + container: undefined, }; }, mounted() { @@ -363,11 +365,9 @@ const Drawer = { } } } - // TODO - // const { change } = getListeners(this); - const change = false; - if (change && this.isOpenChange && this.sFirstEnter) { - change(open); + const { onChange } = this.$attrs; + if (onChange && this.isOpenChange && this.sFirstEnter) { + onChange(open); this.isOpenChange = false; } }, @@ -385,12 +385,14 @@ const Drawer = { keyboard, maskClosable, } = this.$props; + const { class: cls, style } = this.$attrs; const children = getSlot(this); const wrapperClassname = classnames(prefixCls, { [`${prefixCls}-${placement}`]: true, [`${prefixCls}-open`]: open, [className]: !!className, 'no-mask': !showMask, + [cls]: true, }); const isOpenChange = this.isOpenChange; const isHorizontal = placement === 'left' || placement === 'right'; @@ -409,13 +411,13 @@ const Drawer = { let handlerChildren; if (handler !== false) { const handlerDefalut = ( -
+
{}}>
); const { handler: handlerSlot } = this; const handlerSlotVnode = handlerSlot || handlerDefalut; - const { onclick: handleIconClick } = getEvents(handlerSlotVnode); + const handleIconClick = handlerSlotVnode.props && handlerSlotVnode.props.onClick; handlerChildren = withDirectives( cloneVNode(handlerSlotVnode, { onClick: e => { @@ -445,7 +447,7 @@ const Drawer = { // ], onTransitionend: this.onWrapperTransitionEnd, onKeydown: open && keyboard ? this.onKeyDown : noop, - style: wrapStyle, + style: { ...wrapStyle, ...style }, }; // const directivesMaskDom = [ // { diff --git a/examples/App.vue b/examples/App.vue index 52e77609e..70406577c 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,14 +1,24 @@