iView之Modal(一级弹窗和二级弹窗)

iview之Modal
一、普通组件使用方法
普通组件使用方法直接在页面中写<Modal></Modal>标签,在页面内可以写内容。内容也可以自定义标签引入。下面是两种方式引入内容
第一种，直接在Modal标签内写内容
<template>
<div>
<Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
<Modal
v-model="modal1"
title="普通组件使用方法"
@on-ok="ok"
@on-cancel="cancel">
<h1>普通组件使用方法</h1> //自定义内容
</Modal>
</div>
</template>
<script>
export default {
name: "normalModal",
data() {
return {
modal1: false
}
},
methods: {
ok() {},
cancel(){}
}
}
</script>
<style scoped>
</style>
第二种,在Modal标签内引入自定义组件
<template>
<div>
<Button type="primary" @click="modal1 = true">普通组件使用方法</Button>
<Modal
v-model="modal1"
title="普通组件使用方法"
@on-ok="ok"
@on-cancel="cancel">
<FirsModal></FirsModal>//使用自定义组件
</Modal>
</div>
</template>
<script>
//引入自定义组件（弹窗的内容写在FirstModal组件内）
const FirsModal = () => import("../components/FirstModal.vue");
export default {
name: "normalModal",
data() {
return {
modal1: false
}
},
methods: {
ok() {},
cancel(){}
},
components:{
FirsModal//定义自定义组件
}
}
</script>
<style scoped>
</style>
一、实例化使用方法
实例化使用方法也分为两种，一种是直接在render函数内直接写Html标签进行页面渲染，另一种是render函数内写自定义的组件进行渲染
第一种
<template>
<div class="hello">
<Button @click="handleRender">实例化使用方法</Button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {}
},
methods: {
handleRender () {
this.$Modal.confirm({
render: (h) => {
return h('Input', {
props: {
value: this.value,
autofocus: true,
placeholder: 'Please enter your name...'
},
on: {
input: (val) => {
this.value = val;
}
}
})
}
})
}
}
}
</script>
<style scoped>
</style>
第二种
<template>
<div class="hello">
<Button @click="handleRender">实例化使用方法</Button>
</div>
</template>
<script>
const FirsModal = () => import("../components/FirstModal.vue");
export default {
name: 'HelloWorld',
data() {
return {}
},
methods: {
handleRender () {
this.$Modal.confirm({
title: 'demo',
render: (h) => {
return h(FirsModal, {//在此处使用引入的组件
ref: 'firstModal'
})
},
600,
closable: false,
okText: "确定",
cancelText: "取消",
loading: true,
onOk() {}
});
}
}
}
</script>
<style scoped>
</style>
三、二级弹窗
有的业务场景需要使用到二级弹窗，即弹窗中再弹窗。在使用二级弹窗的时候。第一个弹窗实例化和普通组件两种方式都可以使用，第二个弹窗的时候只能使用第一种普通组件使用的方式才行，否则会进行覆盖弹窗。
Helloworld.vue
<template>
<div class="hello">
<Button @click="openFirstModal">打开第一个弹窗</Button>
</div>
</template>
<script>
const FirsModal = () => import("../components/FirstModal.vue");
export default {
name: 'HelloWorld',
data() {
return {}
},
methods: {
openFirstModal() {
this.$Modal.confirm({
title: '第一个窗口',
render: (h) => {
return h(FirsModal, {
ref: 'firstModal'
})
},
600,
closable: false,
okText: "确定",
cancelText: "取消",
loading: true,
onOk() {
}
});
}
}
}
</script>
<style scoped>
</style>
FirstModal.vue
<template>
<div>
<h1>第一个窗口</h1>
<Button @click="openSecondModal">打开第二个弹窗</Button>
<Modal v-model="showModal">
<SecondModal></SecondModal>
</Modal>
</div>
</template>
<script>
const SecondModal = () => import("@/components/SecondModal.vue");
export default {
name: "FirstModal",
data() {
return {
showModal: false
}
},
components: {
SecondModal
},
methods: {
openSecondModal() {
this.showModal = true;
}
}
}
</script>
<style scoped>
</style>
SecondModal.vue
<template>
<div>
<h1>我是第二个窗口</h1>
</div>
</template>
<script>
export default {
name: "secondModal",
data() {
return {}
},
}
</script>
<style scoped>
</style>
效果如下图