vue.js - 我们如何在 iView Ui modal 上使用多个输入

Question

这是我使用的代码示例

render () {
        this.$Modal.confirm({
            render: (h) => {
              // input 
                return h('Input', {
                    props: {
                        value: this.value,
                        autofocus: true,
                        placeholder: 'Please enter your name...'
                    },
                    on: {
                        input: (val) => {
                            this.value = val;
                        }
                    }
                })
            }
        })
    }

我真的不知道如何在此添加另一个输入

Answer 1

渲染函数必须返回单个父元素/组件。所以你需要Input用一个例子替换那个组件div，然后创建它的孩子。

一个例子是：

const inputAttrs = {
  props: {
    value: this.value,
    autofocus: true,
    placeholder: 'Please enter something...'
  },
  on: {
    input: (val) => {
      this.value = val;
    }
  }
};

new Vue({
  el: '#app',
  data() {
    return {
      value: ''
    }
  },
  methods: {
    render() {
      this.$Modal.confirm({
        render: (h) => {
          return h('div', 
              [h('Input', inputAttrs), h('Input', inputAttrs)]
          )
        }
      })
    }
  }
});

jsFiddle：https ://jsfiddle.net/Sergio_fiddle/ckgjzrf5/