鍍金池/ 問答/HTML/ iView中自定義Modal。

iView中自定義Modal。

在學(xué)習(xí)iview modal的時(shí)候：

自定義modal的時(shí)候：

代碼只有現(xiàn)實(shí)一個(gè)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>

圖片描述

我怎么才能在這個(gè)代碼的基礎(chǔ)上再定義它的title，和多幾個(gè)input呢？

回答
編輯回答
喜歡你
render: (h) => {
    return h('div', [
        h('h2', '標(biāo)題'),
        h('Input', {
            props: {
                value: this.value,
                autofocus: true,
                placeholder: 'Please enter your name...'
            },
            on: {
                input: (val) => {
                    this.value = val;
                }
            }
        })
    ])
}

外層包裹div，第二個(gè)參數(shù)用數(shù)組表示自元素序列?？梢愿鶕?jù)官方提示學(xué)習(xí)下render函數(shù)的使用，這是vue的官方api。h是createElement的簡寫，也是vue官方api。

2017年8月17日 05:18