我们如何在iView Ui模式上使用多个输入

时间:2017-09-20 12:01:52

标签: vue.js iview-ui

  

这是我使用的代码示例

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

我真的不知道如何在此

中添加其他输入

1 个答案:

答案 0 :(得分:2)

渲染函数必须返回单个父元素/组件。因此,您需要将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/