【Vue】iView中自定义Modal。

Z时代
2024-01-10
分类：技术分享

在学习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>

【Vue】iView中自定义Modal。

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

回答

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;
                }
            }
        })
    ])}