fixed #583

梁灏
1 parent 891f61d8
Showing 4 changed files with 80 additions and 13 deletions Show diff stats
examples/routers/modal.vue
examples/routers/page.vue
src/components/modal/modal.vue
src/directives/transfer-dom.js
@@ -4,7 +4,6 @@
         <Modal
                 v-model="modal1"
                 title="普通的Modal对话框标题"
-                :transition-names="['slide-up', 'ease']"
                 @on-ok="ok"
                 @on-cancel="cancel">
             <p>对话框内容</p>
 <template>
     <div>
-        <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
-        <br><br>
-        <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
-        <br><br>
-        <Page :current="2" :total="50" simple></Page>
+        <Page :total="100" :current="current"></Page>
+        {{ current }}
+        <Button @click="current = 1">set current</Button>
     </div>
 </template>
 <script>
-    import { Page } from 'iview';
     export default {
-        components: { Page },
-        methods: {
-            pc (page) {
-                console.log(page)
+        data () {
+            return {
+                current: 2
             }
         }
     }
 <template>
-    <span>
+    <div v-transfer-dom>
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" @click="mask"></div>
         </transition>
@@ -24,11 +24,12 @@
                 </div>
             </transition>
         </div>
-    </span>
+    </div>
 </template>
 <script>
     import Icon from '../icon';
     import iButton from '../button/button.vue';
+    import TransferDom from '../../directives/transfer-dom';
     import { getScrollBarSize } from '../../utils/assist';
     import Locale from '../../mixins/locale';
  
@@ -38,6 +39,7 @@
         name: 'Modal',
         mixins: [ Locale ],
         components: { Icon, iButton },
+        directives: { TransferDom },
         props: {
             value: {
                 type: Boolean,
+// Thanks to: https://github.com/airyland/vux/blob/v2/src/directives/transfer-dom/index.js
+// Thanks to: https://github.com/calebroseland/vue-dom-portal
+
+/**
+ * Get target DOM Node
+ * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean
+ * @return {Node} The target that the el will be appended to
+ */
+function getTarget (node) {
+    if (node === void 0) {
+        node = document.body
+    }
+    if (node === true) { return document.body }
+    return node instanceof window.Node ? node : document.querySelector(node)
+}
+
+const directive = {
+    inserted (el, { value }, vnode) {
+        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
+        const parentNode = el.parentNode;
+        const home = document.createComment('');
+        let hasMovedOut = false;
+
+        if (value !== false) {
+            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
+            getTarget(value).appendChild(el); // moving into new place
+            hasMovedOut = true
+        }
+        if (!el.__transferDomData) {
+            el.__transferDomData = {
+                parentNode: parentNode,
+                home: home,
+                target: getTarget(value),
+                hasMovedOut: hasMovedOut
+            }
+        }
+    },
+    componentUpdated (el, { value }) {
+        // need to make sure children are done updating (vs. `update`)
+        const ref$1 = el.__transferDomData;
+        // homes.get(el)
+        const parentNode = ref$1.parentNode;
+        const home = ref$1.home;
+        const hasMovedOut = ref$1.hasMovedOut; // recall where home is
+
+        if (!hasMovedOut && value) {
+            // remove from document and leave placeholder
+            parentNode.replaceChild(home, el);
+            // append to target
+            getTarget(value).appendChild(el);
+            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) });
+        } else if (hasMovedOut && value === false) {
+            // previously moved, coming back home
+            parentNode.replaceChild(el, home);
+            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) });
+        } else if (value) {
+            // already moved, going somewhere else
+            getTarget(value).appendChild(el);
+        }
+    },
+    unbind: function unbind (el, binding) {
+        el.className = el.className.replace('v-transfer-dom', '')
+        if (el.__transferDomData.hasMovedOut === true) {
+            el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
+        }
+        el.__transferDomData = null
+    }
+};
+
+export default directive;
 \ No newline at end of file