update Modal
This commit is contained in:
parent
d519d68561
commit
dce5a3ea6b
3 changed files with 27 additions and 2 deletions
|
@ -3,11 +3,32 @@
|
||||||
<Button @click="confirm">标准</Button>
|
<Button @click="confirm">标准</Button>
|
||||||
<Button @click="custom">自定义按钮文字</Button>
|
<Button @click="custom">自定义按钮文字</Button>
|
||||||
<Button @click="async">异步关闭</Button>
|
<Button @click="async">异步关闭</Button>
|
||||||
|
<Button type="primary" @click="modal1 = true">显示对话框</Button>
|
||||||
|
<Modal
|
||||||
|
v-model="modal1"
|
||||||
|
title="普通的Modal对话框标题"
|
||||||
|
@on-ok="ok"
|
||||||
|
@on-cancel="cancel">
|
||||||
|
<p>对话框内容</p>
|
||||||
|
<p>对话框内容</p>
|
||||||
|
<p>对话框内容</p>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
modal1: false
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
ok () {
|
||||||
|
this.$Message.info('点击了确定');
|
||||||
|
},
|
||||||
|
cancel () {
|
||||||
|
this.$Message.info('点击了取消');
|
||||||
|
},
|
||||||
confirm () {
|
confirm () {
|
||||||
this.$Modal.confirm({
|
this.$Modal.confirm({
|
||||||
title: '确认对话框标题',
|
title: '确认对话框标题',
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div v-transfer-dom>
|
||||||
<transition :name="transitionNames[1]">
|
<transition :name="transitionNames[1]">
|
||||||
<div :class="maskClasses" v-show="visible" @click="mask"></div>
|
<div :class="maskClasses" v-show="visible" @click="mask"></div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
|
@ -18,6 +18,7 @@ const directive = {
|
||||||
inserted (el, { value }, vnode) {
|
inserted (el, { value }, vnode) {
|
||||||
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
|
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
|
||||||
const parentNode = el.parentNode;
|
const parentNode = el.parentNode;
|
||||||
|
if (!parentNode) return;
|
||||||
const home = document.createComment('');
|
const home = document.createComment('');
|
||||||
let hasMovedOut = false;
|
let hasMovedOut = false;
|
||||||
|
|
||||||
|
@ -38,6 +39,7 @@ const directive = {
|
||||||
componentUpdated (el, { value }) {
|
componentUpdated (el, { value }) {
|
||||||
// need to make sure children are done updating (vs. `update`)
|
// need to make sure children are done updating (vs. `update`)
|
||||||
const ref$1 = el.__transferDomData;
|
const ref$1 = el.__transferDomData;
|
||||||
|
if (!ref$1) return;
|
||||||
// homes.get(el)
|
// homes.get(el)
|
||||||
const parentNode = ref$1.parentNode;
|
const parentNode = ref$1.parentNode;
|
||||||
const home = ref$1.home;
|
const home = ref$1.home;
|
||||||
|
@ -59,7 +61,9 @@ const directive = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
unbind: function unbind (el, binding) {
|
unbind: function unbind (el, binding) {
|
||||||
el.className = el.className.replace('v-transfer-dom', '')
|
el.className = el.className.replace('v-transfer-dom', '');
|
||||||
|
const ref$1 = el.__transferDomData;
|
||||||
|
if (!ref$1) return;
|
||||||
if (el.__transferDomData.hasMovedOut === true) {
|
if (el.__transferDomData.hasMovedOut === true) {
|
||||||
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
|
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue