add dialog demo

components/_util/ContainerRender.vue

@@ -53,13 +53,14 @@ export default {
             parent: self.parent,
             el: self.container,
             mounted () {
-              this.$next(() => {
+              this.$nextTick(() => {
                 if (ready) {
                   ready.call(self)
                 }
               })
             },
             render () {
+              console.log(props)
               return getComponent(props)
             },
           })

components/vc-dialog/Dialog.vue

@@ -3,7 +3,7 @@ import KeyCode from '../_util/KeyCode'
 import LazyRenderBox from './LazyRenderBox'
 import BaseMixin from '../_util/BaseMixin'
 import getTransitionProps from '../_util/getTransitionProps'
-import getScrollBarSize from '../__util/getScrollBarSize'
+import getScrollBarSize from '../_util/getScrollBarSize'
 import getDialogPropTypes from './IDialogPropTypes'
 const IDialogPropTypes = getDialogPropTypes()
 
@@ -105,7 +105,7 @@ export default {
           this.lastOutSideFocusNode = document.activeElement
           this.addScrollingEffect()
           this.$refs.wrap.focus()
-          const dialogNode = this.$refs.dialog
+          const dialogNode = this.$refs.dialog.$el
           if (mousePosition) {
             const elOffset = offset(dialogNode)
             setTransformOrigin(dialogNode,
@@ -386,7 +386,7 @@ export default {
           tabIndex={-1}
           onKeydown={this.onKeydown}
           class={`${prefixCls}-wrap ${wrapClassName || ''}`}
-          ref={this.saveRef('wrap')}
+          ref='wrap'
           onClick={maskClosable ? this.onMaskClick : undefined}
           role='dialog'
           aria-labelledby={title ? this.titleId : null}

components/vc-dialog/DialogWrap.vue

@@ -1,6 +1,6 @@
 <script>
 import Dialog from './Dialog'
-import ContainerRender from 'rc-util/lib/ContainerRender'
+import ContainerRender from '../_util/ContainerRender'
 import getDialogPropTypes from './IDialogPropTypes'
 const IDialogPropTypes = getDialogPropTypes()
 const DialogWrap = {
@@ -27,47 +27,46 @@ const DialogWrap = {
       this.removeContainer()
     }
   },
+  methods: {
+    getComponent (extra = {}) {
+      const dialogProps = {
+        props: {
+          ...this.$props,
+          ...extra,
+        },
+        ref: '_component',
+        key: 'dialog',
+      }
+      return (
+        <Dialog {...dialogProps}>{this.$slots.default}</Dialog>
+      )
+    },
 
-  getComponent (extra = {}) {
+    getContainer2 () {
-    const dialogProps = {
+      if (this.getContainer) {
-      props: {
+        return this.getContainer()
-        ...this.$props,
+      }
-        ...extra,
+      const container = document.createElement('div')
-      },
+      document.body.appendChild(container)
-      ref: '_component',
+      return container
-      key: 'dialog',
+    },
-    }
-    return (
-      <Dialog {...dialogProps}>{this.$slots.default}</Dialog>
-    )
-  },
-
-  getContainer () {
-    if (this.getContainer) {
-      return this.getContainer()
-    }
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    return container
   },
 
   render () {
     const { visible } = this
-
     return (
       <ContainerRender
         parent={this}
         visible={visible}
         autoDestroy={false}
         getComponent={this.getComponent}
-        getContainer={this.getContainer}
+        getContainer={this.getContainer2}
-      >
+        children={({ renderComponent, removeContainer }) => {
-        {({ renderComponent, removeContainer }) => {
           this.renderComponent = renderComponent
           this.removeContainer = removeContainer
           return null
         }}
-      </ContainerRender>
+      />
     )
   },
 }

components/vc-dialog/demo/ant-design.vue

@@ -0,0 +1,113 @@
+<script>
+/* eslint no-console:0 */
+
+import '../assets/index.less'
+// use import Dialog from 'rc-dialog'
+import Dialog from '../DialogWrap'
+
+export default {
+  data () {
+    return {
+      visible: false,
+      width: 600,
+      destroyOnClose: false,
+      center: false,
+      mousePosition: {},
+    }
+  },
+  methods: {
+    onClick (e) {
+      this.visible = true
+      this.mousePosition = {
+        x: e.pageX,
+        y: e.pageY,
+      }
+    },
+
+    onClose (e) {
+    // console.log(e);
+      this.visible = false
+    },
+
+    onDestroyOnCloseChange (e) {
+      this.destroyOnClose = e.target.checked
+    },
+
+    changeWidth (e) {
+      console.log(e)
+      this.width = this.width === 600 ? 800 : 600
+    },
+
+    handleCenter (e) {
+      this.center = e.target.checked
+    },
+  },
+
+  render () {
+    const style = {
+      width: this.width + 'px',
+    }
+    let wrapClassName = ''
+    if (this.center) {
+      wrapClassName = 'center'
+    }
+    const dialog = (
+      <Dialog
+        visible={this.visible}
+        wrapClassName={wrapClassName}
+        animation='zoom'
+        maskAnimation='fade'
+        onClose={this.onClose}
+        style={style}
+        mousePosition={this.mousePosition}
+        destroyOnClose={this.destroyOnClose}
+      >
+        <input />
+        <p>basic modal</p>
+        <button onClick={this.changeWidth}>change width</button>
+        <div style={{ height: '200px' }} />
+      </Dialog>
+    )
+    return (
+      <div>
+        <h2>ant-design dialog</h2>
+        <div style={{ width: '90%', margin: '0 auto' }}>
+          <style>
+            {`
+            .center {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            `}
+          </style>
+          <p>
+            <button className='btn btn-primary' onClick={this.onClick}>
+            show dialog
+            </button>
+          &nbsp;
+            <label>
+            destroy on close:
+              <input
+                type='checkbox'
+                checked={this.destroyOnClose}
+                onChange={this.onDestroyOnCloseChange}
+              />
+            </label>
+          &nbsp;
+            <label>
+            center
+              <input
+                type='checkbox'
+                checked={this.center}
+                onChange={this.handleCenter}
+              />
+            </label>
+          </p>
+          {dialog}
+        </div>
+      </div>
+    )
+  },
+}
+</script>

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/pagination/demo/${d}.vue`),
+    component: import(`../components/vc-dialog/demo/${d}.vue`),
   }
 }
 export default [