Commit dce5a3ea6b3e600a2973d0e7b4c17de14615bf68

Authored by Aresn
1 parent d519d685

update Modal

examples/routers/modal.vue
... ... @@ -3,11 +3,32 @@
3 3 <Button @click="confirm">标准</Button>
4 4 <Button @click="custom">自定义按钮文字</Button>
5 5 <Button @click="async">异步关闭</Button>
  6 + <Button type="primary" @click="modal1 = true">显示对话框</Button>
  7 + <Modal
  8 + v-model="modal1"
  9 + title="普通的Modal对话框标题"
  10 + @on-ok="ok"
  11 + @on-cancel="cancel">
  12 + <p>对话框内容</p>
  13 + <p>对话框内容</p>
  14 + <p>对话框内容</p>
  15 + </Modal>
6 16 </div>
7 17 </template>
8 18 <script>
9 19 export default {
  20 + data () {
  21 + return {
  22 + modal1: false
  23 + }
  24 + },
10 25 methods: {
  26 + ok () {
  27 + this.$Message.info('点击了确定');
  28 + },
  29 + cancel () {
  30 + this.$Message.info('点击了取消');
  31 + },
11 32 confirm () {
12 33 this.$Modal.confirm({
13 34 title: '确认对话框标题',
... ...
src/components/modal/modal.vue
1 1 <template>
2   - <div>
  2 + <div v-transfer-dom>
3 3 <transition :name="transitionNames[1]">
4 4 <div :class="maskClasses" v-show="visible" @click="mask"></div>
5 5 </transition>
... ...
src/directives/transfer-dom.js
... ... @@ -18,6 +18,7 @@ const directive = {
18 18 inserted (el, { value }, vnode) {
19 19 el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
20 20 const parentNode = el.parentNode;
  21 + if (!parentNode) return;
21 22 const home = document.createComment('');
22 23 let hasMovedOut = false;
23 24  
... ... @@ -38,6 +39,7 @@ const directive = {
38 39 componentUpdated (el, { value }) {
39 40 // need to make sure children are done updating (vs. `update`)
40 41 const ref$1 = el.__transferDomData;
  42 + if (!ref$1) return;
41 43 // homes.get(el)
42 44 const parentNode = ref$1.parentNode;
43 45 const home = ref$1.home;
... ... @@ -59,7 +61,9 @@ const directive = {
59 61 }
60 62 },
61 63 unbind: function unbind (el, binding) {
62   - el.className = el.className.replace('v-transfer-dom', '')
  64 + el.className = el.className.replace('v-transfer-dom', '');
  65 + const ref$1 = el.__transferDomData;
  66 + if (!ref$1) return;
63 67 if (el.__transferDomData.hasMovedOut === true) {
64 68 el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
65 69 }
... ...