fix: modal afterClose trigger twice

Author: tangjinzhou

components/_util/PortalWrapper.js

@@ -2,6 +2,7 @@ import PropTypes from './vue-types';
 import switchScrollingEffect from './switchScrollingEffect';
 import setStyle from './setStyle';
 import Portal from './Portal';
+import syncWatch from './syncWatch';
 
 let openCount = 0;
 const windowIsUndefined = !(
@@ -32,9 +33,9 @@ export default {
     this.setWrapperClassName();
   },
   watch: {
-    visible(val) {
+    visible: syncWatch(function(val) {
       openCount = val ? openCount + 1 : openCount - 1;
-    },
+    }),
     getContainer(getContainer, prevGetContainer) {
       const getContainerIsFunc =
         typeof getContainer === 'function' && typeof prevGetContainer === 'function';

components/modal/Modal.jsx

@@ -11,6 +11,7 @@ const ButtonType = buttonTypes().type;
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
+import syncWatch from '../_util/syncWatch';
 
 let mousePosition = null;
 // ref: https://github.com/ant-design/ant-design/issues/15795
@@ -106,9 +107,9 @@ export default {
     };
   },
   watch: {
-    visible(val) {
+    visible: syncWatch(function(val) {
       this.sVisible = val;
-    },
+    }),
   },
   setup() {
     return {

components/vc-dialog/Dialog.jsx

@@ -65,7 +65,6 @@ export default {
   }),
   data() {
     return {
-      destroyPopup: false,
       inTransition: false,
       titleId: `rcDialogTitle${uuid++}`,
       dialogMouseDown: undefined,
@@ -74,9 +73,6 @@ export default {
 
   watch: {
     visible(val) {
-      if (val) {
-        this.destroyPopup = false;
-      }
       this.$nextTick(() => {
         this.updatedCallback(!val);
       });
@@ -147,15 +143,12 @@ export default {
       }
     },
     onAnimateLeave() {
-      const { afterClose, destroyOnClose } = this;
+      const { afterClose } = this;
       // need demo?
       // https://github.com/react-component/dialog/pull/28
       if (this.$refs.wrap) {
         this.$refs.wrap.style.display = 'none';
       }
-      if (destroyOnClose) {
-        this.destroyPopup = true;
-      }
       this.inTransition = false;
       this.switchScrollingEffect();
       if (afterClose) {
@@ -295,7 +288,7 @@ export default {
       });
       return (
         <Transition key="dialog" {...dialogTransitionProps}>
-          {visible || !this.destroyPopup ? dialogElement : null}
+          {visible || !this.destroyOnClose ? dialogElement : null}
         </Transition>
       );
     },

examples/App.vue

@@ -15,7 +15,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/carousel/demo';
+import demo from '../antdv-demo/docs/modal/demo';
 export default {
   components: {
     demo,