iView中自定义Modal。

Question

在学习iview modal的时候：

自定义modal的时候：

代码只有现实一个input：

<template>
    <p>
        Name: {{ value }}
    </p>
    <p>
        <Button @click="handleRender">Custom content</Button>
    </p>
</template>
<script>
    export default {
        data () {
            return {
                value: ''
            }            
        },
        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>

我怎么才能在这个代码的基础上再定义它的title，和多几个input呢？

Answer 1

render: (h) => {
    return h('div', [
        h('h2', '标题'),
        h('Input', {
            props: {
                value: this.value,
                autofocus: true,
                placeholder: 'Please enter your name...'
            },
            on: {
                input: (val) => {
                    this.value = val;
                }
            }
        })
    ])
}

外层包裹div，第二个参数用数组表示自元素序列。可以根据官方提示学习下render函数的使用，这是vue的官方api。h是createElement的简写，也是vue官方api。