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

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

@ -2,15 +2,17 @@
exports[`Drawer class is test_drawer 1`] = `
<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-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;">
<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-wrapper-body">
<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>
</div>
<!---->
</div>
</div>
</div>
@ -18,14 +20,16 @@ exports[`Drawer class is test_drawer 1`] = `
exports[`Drawer closable is false 1`] = `
<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-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body">
<!---->
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
<!---->
</div>
</div>
</div>
@ -33,14 +37,16 @@ exports[`Drawer closable is false 1`] = `
exports[`Drawer destroyOnClose is true 1`] = `
<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-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body" style="opacity: 0; transition: opacity .3s;">
<!---->
<div class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
<!---->
</div>
</div>
</div>
@ -48,17 +54,18 @@ exports[`Drawer destroyOnClose is true 1`] = `
exports[`Drawer have a title 1`] = `
<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-content-wrapper" style="transform: translateX(100%); width: 256px;">
<div class="ant-drawer-content">
<div class="ant-drawer-wrapper-body">
<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 class="ant-drawer-body">Here is content of Drawer</div>
</div>
</div>
<!---->
</div>
</div>
</div>
@ -66,15 +73,17 @@ exports[`Drawer have a title 1`] = `
exports[`Drawer render correctly 1`] = `
<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-content-wrapper" style="transform: translateX(100%); width: 400px;">
<div class="ant-drawer-content">
<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>
</div>
<!---->
</div>
</div>
</div>
@ -82,15 +91,17 @@ exports[`Drawer render correctly 1`] = `
exports[`Drawer render top drawer 1`] = `
<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-content-wrapper" style="transform: translateY(-100%); height: 400px;">
<div class="ant-drawer-content">
<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>
</div>
<!---->
</div>
</div>
</div>

17
components/drawer/index.jsx
View File

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

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

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

2
examples/App.vue
View File

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