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'
})
},
width: 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'
})
},
width: 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>
效果如下圖