iView實現自定義Modal

Modal組件是iView庫中較經常使用的一個，而如何利用render實現一個自定義的Modal在官方wiki中並無詳細說明。我在這裏將舉例說明：

所謂自定義內容，是指使用一個自定義的組件做爲Modal框的內容。在個人實例中，我使用的內容組件包含有兩個Input組件，用於實現兩個變量的輸入。

自定義組件add.vue

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

在這個組件中，爲兩個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.$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>

在父組件中，引入自定義內容組件add(注意：箭頭函數中組件爲 add 而不是 'add' )，並監聽事件value1和value2，及時爲data中v1和v2賦值。若在此過程當中父組件有須要傳遞給內容組件的參數，須要在props中填入。

onOk項後定義觸發模態框中ok按鈕的回調函數。本例中是檢查input中輸入的值是否爲空，並在接口中上傳數據。

這樣，iView中一個自定義Modal就經過render方法實現了。

最近作了個項目，採用先後分離的模式，而前端使用了iView。做爲一個後端程序員，碰見了很多坑,項目上線後我會把我解決的問題總結下，陸續寫成文章。既方便本身查看，也但願能夠幫助到跟我同樣的"小白"。

我的新項目上線後，我會push到個人github。但願你們能夠體驗下，給我點建議，若是能給個star最好不過了。