使用Element-ui组件中MessageBox组件中自定义消息message中使用input输入框怎么绑定state中的值

Question

使用Element-ui组件中MessageBox组件中自定义消息message中使用input输入框怎么绑定state中的值，或者在确认按钮中怎么获取这个input的值.

export default {
    data () {
      return {
        inputValue: ''
      }
    },
    methods: {
      open4() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode'),
            h('input', null, this.inputValue)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      },
    }
  }

Answer 1

解决了吗，我使用了Dialog

Answer 2

this.$prompt

Answer 3

记录下解决的办法：

 const h = this.$createElement;
      let that = this;
      this.$msgbox({
        title: "扫码",
        message: h("div", null, [
          h("el-input", null, that.inputValue),
          h("input", {
            style: {
              marginTop: "20px"
            },
            attrs: { value: that.inputValue, id:"hinput"},
             on: {
                  input: this.handleClick
                }
          })
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: "info",
          message: "action: " + action
        });
      });
      
       handleClick(val) {
       var a=document.getElementById("hinput").value;
        this.inputValue = a
       
        console.log(this.inputValue)
    }

感觉不是最好的方法，但是反馈下

Answer 4

挖个坟，这么多年过去了，有没有什么好的办法