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
24
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