Modal组件是iView库中较常⽤的⼀个，⽽如何利⽤render实现⼀个⾃定义的Modal在官⽅wiki中并没有详细说明。我在这⾥将举例说明： 所谓⾃定义内容，是指使⽤⼀个⾃定义的组件作为Modal框的内容。在我的实例中，我使⽤的内容组件包含有两个Input组件，⽤于实现两个变量的输⼊。cnf
⾃定义组件add.vue
<template>
<Row>
<div class="wrapper">
<h4>
<Icon type="heart"></Icon> save
</h4>
bt欧洲</div>
<div class="wrapper">
<Input v-model="value1" @on-change="value1Change"></Input>
</div>
<div class="wrapper">
<Input v-model="value2" @on-change="value2Change"></Input>
</div>
</Row>
</template>
郭莎莎<script>
export default {
name: 'add',
data() {
return {
value1:'',
value2:''
}
},
methods:{
数学课堂教学模式value1Change:function() {
var obj = this
this.$emit('value1', obj.value1)
},
value2Change:function() {
var obj = this
this.$emit('value2', obj.value2)
}
}
}
</script>
在这个组件中，为两个Input组件分别定义on-change事件的⽅法。只要value1的值或者value2的值发⽣变化，就会向⽗组件emit对应的事件value1和value2。
⽗组件content.vue
<template>
<Button @click="openModal">弹出模态框</Button>
</template>
<script>
import add from './content/add.vue'
export default {
data() {
return {
v1:'',
v2:''
}
},
components:{
add
},
methods:{
openModal: function() {
this.$firm({
scrollable:true,
okText:'保存',
render: (h) => {
return h(add, {中国核应急救援队
props: {
},
on: {
value1: (value1) => {
this.v1 = value1
},
value2: (value2) => {
this.v2 = value2
}
}
})
},
onOk: () => {
if (this.v1 == '' || this.v2 == '') {
this.$('信息填写不完整!')
}
const msg = this.$Message.loading({
content: '正在保存..',
duration: 0
})
this.saveLink(msg)
}
})
}
}
}
</script>
在⽗组件中，引⼊⾃定义内容组件add(注意：箭头函数中组件为 add ⽽不是 'add' )，并监听事件value1和value2，及时为data中v1和v2赋值。若在此过程中⽗组件有需要传递给内容组件的参数，需要在props中填⼊。
onOk项后定义触发模态框中ok按钮的回调函数。本例中是检查input中输⼊的值是否为空，并在接⼝中上传数据。
这样，iView中⼀个⾃定义Modal就通过render⽅法实现了。
临沂史晓东最近做了个项⽬，采⽤前后分离的模式，⽽前端使⽤了iView。作为⼀个后端程序员，遇见了不少坑，项⽬上线后我会把我解决的问题总结下，陆续写成⽂章。既⽅便⾃⼰查看，也希望可以帮助到跟我⼀样的"⼩⽩"。 个⼈新项⽬上线后，我会push到。希望⼤家可以体验下，给我点建议，如果能给个star最好不过了。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议