github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: drawer

pull/2682/head
tanjinzhou 2020-07-29 20:57:32 +08:00
parent fc82e7c536
commit d6a7c041b5
6 changed files with 51 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit be0a3b6de3866c09e82c6e7e66b6db5932142f49 Subproject commit e7feb6f5127f054c5ddac633b733369e182ab6f2

20
components/drawer/__tests__/Drawer.test.js
View File

@ -22,15 +22,7 @@ const DrawerCom = {
}, },
}, },
render() { render() {
const drawerProps = { return <Drawer {...this.$props}>Here is content of Drawer</Drawer>;
props: {
destroyOnClose: true,
getContainer: false,
visible: false,
wrapClassName: this.wrapClassName,
},
};
return <Drawer {...drawerProps}>Here is content of Drawer</Drawer>;
}, },
}; };
@ -43,7 +35,7 @@ describe('Drawer', () => {
getContainer: false, getContainer: false,
}, },
slots: { slots: {
default: ['Here is content of Drawer'], default: () => ['Here is content of Drawer'],
}, },
sync: false, sync: false,
}; };
@ -62,7 +54,7 @@ describe('Drawer', () => {
getContainer: false, getContainer: false,
}, },
slots: { slots: {
default: 'Here is content of Drawer', default: () => 'Here is content of Drawer',
}, },
sync: false, sync: false,
}; };
@ -80,7 +72,7 @@ describe('Drawer', () => {
getContainer: false, getContainer: false,
}, },
slots: { slots: {
default: 'Here is content of Drawer', default: () => 'Here is content of Drawer',
}, },
sync: false, sync: false,
}; };
@ -98,7 +90,7 @@ describe('Drawer', () => {
getContainer: false, getContainer: false,
}, },
slots: { slots: {
default: 'Here is content of Drawer', default: () => 'Here is content of Drawer',
}, },
sync: false, sync: false,
}; };
@ -116,7 +108,7 @@ describe('Drawer', () => {
getContainer: false, getContainer: false,
}, },
slots: { slots: {
default: 'Here is content of Drawer', default: () => 'Here is content of Drawer',
}, },
sync: false, sync: false,
}; };

33
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
View File

@ -2,15 +2,17 @@
exports[`Drawer class is test_drawer 1`] = ` exports[`Drawer class is test_drawer 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-right test_drawer"> <div class="ant-drawer ant-drawer-right test_drawer" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;"> <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;"> <div class="ant-drawer-wrapper-body">
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div> <div class="ant-drawer-header-no-title">
<!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -18,14 +20,16 @@ exports[`Drawer class is test_drawer 1`] = `
exports[`Drawer closable is false 1`] = ` exports[`Drawer closable is false 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-right"> <div class="ant-drawer ant-drawer-right" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;"> <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body"> <div class="ant-drawer-wrapper-body">
<!---->
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -33,14 +37,16 @@ exports[`Drawer closable is false 1`] = `
exports[`Drawer destroyOnClose is true 1`] = ` exports[`Drawer destroyOnClose is true 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-right"> <div class="ant-drawer ant-drawer-right" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;"> <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;"> <div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;">
<!---->
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -48,17 +54,18 @@ exports[`Drawer destroyOnClose is true 1`] = `
exports[`Drawer have a title 1`] = ` exports[`Drawer have a title 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-right"> <div class="ant-drawer ant-drawer-right" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;"> <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body"> <div class="ant-drawer-wrapper-body">
<div class="ant-drawer-header"> <div class="ant-drawer-header">
<div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button> <div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
</div> </div>
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -66,15 +73,17 @@ exports[`Drawer have a title 1`] = `
exports[`Drawer render correctly 1`] = ` exports[`Drawer render correctly 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-right"> <div class="ant-drawer ant-drawer-right" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;"> <div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body"> <div class="ant-drawer-wrapper-body">
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div> <div class="ant-drawer-header-no-title">
<!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -82,15 +91,17 @@ exports[`Drawer render correctly 1`] = `
exports[`Drawer render top drawer 1`] = ` exports[`Drawer render top drawer 1`] = `
<div class=""> <div class="">
<div tabindex="-1" class="ant-drawer ant-drawer-top"> <div class="ant-drawer ant-drawer-top" tabindex="-1">
<div class="ant-drawer-mask"></div> <div class="ant-drawer-mask"></div>
<div class="ant-drawer-content-wrapper" style="transform: translateY(-100%); height: 400px;"> <div class="ant-drawer-content-wrapper" style="transform: translateY(-100%); height: 400px;">
<div class="ant-drawer-content"> <div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body"> <div class="ant-drawer-wrapper-body">
<div class="ant-drawer-header-no-title"><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div> <div class="ant-drawer-header-no-title">
<!----><button aria-label="Close" class="ant-drawer-close"><span class="anticon anticon-close" role="img" aria-label="close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button></div>
<div class="ant-drawer-body">Here is content of Drawer</div> <div class="ant-drawer-body">Here is content of Drawer</div>
</div> </div>
</div> </div>
<!---->
</div> </div>
</div> </div>
</div> </div>

17
components/drawer/index.jsx
View File

@ -34,6 +34,8 @@ const Drawer = {
handle: PropTypes.any, handle: PropTypes.any,
afterVisibleChange: PropTypes.func, afterVisibleChange: PropTypes.func,
keyboard: PropTypes.bool.def(true), keyboard: PropTypes.bool.def(true),
onClose: PropTypes.func,
'onUpdate:visible': PropTypes.func,
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
data() { data() {
@ -49,17 +51,6 @@ const Drawer = {
configProvider, configProvider,
}; };
}, },
// inject: {
// parentDrawer: {
// default: () => null,
// },
// configProvider: { default: () => ConfigConsumerProps },
// },
// provide() {
// return {
// parentDrawer: this,
// };
// },
beforeCreate() { beforeCreate() {
const parentDrawer = inject('parentDrawer', null); const parentDrawer = inject('parentDrawer', null);
provide('parentDrawer', this); provide('parentDrawer', this);
@ -93,6 +84,7 @@ const Drawer = {
}, },
methods: { methods: {
close(e) { close(e) {
this.$emit('update:visible', false);
this.$emit('close', e); this.$emit('close', e);
}, },
// onMaskClick(e) { // onMaskClick(e) {
@ -241,13 +233,14 @@ const Drawer = {
'pageHeader', 'pageHeader',
'autoInsertSpaceInButton', 'autoInsertSpaceInButton',
]), ]),
onClose: this.close,
handler, handler,
...offsetStyle, ...offsetStyle,
prefixCls, prefixCls,
open: visible, open: visible,
showMask: mask, showMask: mask,
placement, placement,
className: classnames({ class: classnames({
[wrapClassName]: !!wrapClassName, [wrapClassName]: !!wrapClassName,
[haveMask]: !!haveMask, [haveMask]: !!haveMask,
}), }),

67
components/vc-drawer/src/Drawer.js
View File

@ -1,5 +1,5 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { cloneVNode, withDirectives, Teleport, nextTick } from 'vue'; import { cloneVNode, Teleport, nextTick } from 'vue';
import antRef from '../../_util/ant-ref'; import antRef from '../../_util/ant-ref';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { initDefaultProps, getSlot } from '../../_util/props-util'; import { initDefaultProps, getSlot } from '../../_util/props-util';
@ -42,7 +42,6 @@ const Drawer = {
handler: true, handler: true,
maskStyle: {}, maskStyle: {},
wrapperClassName: '', wrapperClassName: '',
className: '',
}), }),
data() { data() {
this.levelDom = []; this.levelDom = [];
@ -373,7 +372,6 @@ const Drawer = {
}, },
getChildToRender(open) { getChildToRender(open) {
const { const {
className,
prefixCls, prefixCls,
placement, placement,
handler, handler,
@ -390,9 +388,8 @@ const Drawer = {
const wrapperClassname = classnames(prefixCls, { const wrapperClassname = classnames(prefixCls, {
[`${prefixCls}-${placement}`]: true, [`${prefixCls}-${placement}`]: true,
[`${prefixCls}-open`]: open, [`${prefixCls}-open`]: open,
[className]: !!className,
'no-mask': !showMask, 'no-mask': !showMask,
[cls]: true, [cls]: cls,
}); });
const isOpenChange = this.isOpenChange; const isOpenChange = this.isOpenChange;
const isHorizontal = placement === 'left' || placement === 'right'; const isHorizontal = placement === 'left' || placement === 'right';
@ -418,64 +415,25 @@ const Drawer = {
const { handler: handlerSlot } = this; const { handler: handlerSlot } = this;
const handlerSlotVnode = handlerSlot || handlerDefalut; const handlerSlotVnode = handlerSlot || handlerDefalut;
const handleIconClick = handlerSlotVnode.props && handlerSlotVnode.props.onClick; const handleIconClick = handlerSlotVnode.props && handlerSlotVnode.props.onClick;
handlerChildren = withDirectives( handlerChildren = cloneVNode(handlerSlotVnode, {
cloneVNode(handlerSlotVnode, {
onClick: e => { onClick: e => {
handleIconClick && handleIconClick(); handleIconClick && handleIconClick();
this.onIconTouchEnd(e); this.onIconTouchEnd(e);
}, },
}), ref: c => {
[
[
antRef, //directive
c => {
this.handlerdom = c; this.handlerdom = c;
}, // value },
], });
],
);
} }
const domContProps = { const domContProps = {
class: wrapperClassname, class: wrapperClassname,
// directives: [
// {
// name: 'ant-ref',
// value: c => {
// this.dom = c;
// },
// },
// ],
onTransitionend: this.onWrapperTransitionEnd, onTransitionend: this.onWrapperTransitionEnd,
onKeydown: open && keyboard ? this.onKeyDown : noop, onKeydown: open && keyboard ? this.onKeyDown : noop,
style: { ...wrapStyle, ...style }, style: { ...wrapStyle, ...style },
}; };
// const directivesMaskDom = [
// {
// name: 'ant-ref',
// value: c => {
// this.maskDom = c;
// },
// },
// ];
// const directivesContentWrapper = [
// {
// name: 'ant-ref',
// value: c => {
// this.contentWrapper = c;
// },
// },
// ];
// const directivesContentDom = [
// {
// name: 'ant-ref',
// value: c => {
// this.contentDom = c;
// },
// },
// ];
return ( return (
<div <div
v-ant-ref={c => { ref={c => {
this.dom = c; this.dom = c;
}} }}
{...domContProps} {...domContProps}
@ -487,10 +445,9 @@ const Drawer = {
class={`${prefixCls}-mask`} class={`${prefixCls}-mask`}
onClick={maskClosable ? this.onMaskTouchEnd : noop} onClick={maskClosable ? this.onMaskTouchEnd : noop}
style={maskStyle} style={maskStyle}
v-ant-ref={c => { ref={c => {
this.maskDom = c; this.maskDom = c;
}} }}
// {...{ directives: directivesMaskDom }}
/> />
)} )}
<div <div
@ -501,17 +458,15 @@ const Drawer = {
width: isNumeric(width) ? `${width}px` : width, width: isNumeric(width) ? `${width}px` : width,
height: isNumeric(height) ? `${height}px` : height, height: isNumeric(height) ? `${height}px` : height,
}} }}
v-ant-ref={c => { ref={c => {
this.contentWrapper = c; this.contentWrapper = c;
}} }}
// {...{ directives: directivesContentWrapper }}
> >
<div <div
class={`${prefixCls}-content`} class={`${prefixCls}-content`}
v-ant-ref={c => { ref={c => {
this.contentDom = c; this.contentDom = c;
}} }}
// {...{ directives: directivesContentDom }}
onTouchstart={open ? this.removeStartHandler : noop} // 跑用例用 onTouchstart={open ? this.removeStartHandler : noop} // 跑用例用
onTouchmove={open ? this.removeMoveHandler : noop} // 跑用例用 onTouchmove={open ? this.removeMoveHandler : noop} // 跑用例用
> >
@ -634,7 +589,7 @@ const Drawer = {
return ( return (
<div <div
class={wrapperClassName} class={wrapperClassName}
v-ant-ref={c => { ref={c => {
this.container = c; this.container = c;
}} }}
> >

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script> <script>
import demo from '../antdv-demo/docs/divider/demo/index'; import demo from '../antdv-demo/docs/drawer/demo/index';
export default { export default {
components: { components: {