iview自定义Modal

使用一个自定义的组件作为 Modal 框的内容

内容组件包含有两个 Input 组件,用于实现两个变量的输入。

自定义组件 add.vue

为两个 Input 组件分别定义 on-change 事件的方法。只要 value1 的值或者 value2 的值发生变化,就会向父组件 emit 对应的事件 value1 和 value2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<Row>
<div class="wrapper">
<h4>
<Icon type="heart"></Icon>&nbsp;save
</h4>
</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>

父组件

引入自定义内容组件 add,监听事件 value1 和 value2, 若在此过程中父组件有需要传递给内容组件的参数,需要在 props 中填入。onOk 项后定义触发模态框中 ok 按钮的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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.$Modal.confirm({
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.$Message.error('信息填写不完整!')
}
const msg = this.$Message.loading({
content: '正在保存..',
duration: 0
})
this.saveLink(msg)
}
})
}
}
}
</script>

点击确认的回调

自定义了一个 table 的按钮 点击按钮 触发自定义组件

点击确认的回调函数 onOK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
edit (index) {
// 编辑按钮
this.$Modal.confirm({
scrollable: true,
okText: '确认修改',
render: (h) => {
return h(edit_task, {
props: {
autofocus: true
},
on: {
model1: (model1) => {
this.model1 = model1;
}
},
onOk: '',
});
},
onOk: () => {
// 回调函数
}
});
});

展示

table

edit