elementui使用MessageBox 弹框自定义内容$msgbox：实现一个textarea文本输入框

Posted 2020-12-18 安然亦智

1、首先我们可以看下官网的例子：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: \'消息\',
          message: h(\'p\', null, [
            h(\'span\', null, \'内容可以是 \'),
            h(\'i\', { style: \'color: teal\' }, \'VNode\')
          ]),
          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
          });
        });
      }
    }
  }
</script>

看到的效果是：

 

 

 

显示的内容是固定的，肯定不是我们想要的结果了，我们需要动态的表单数据；原理很简单，就是自己创建dom节点，一开始我想的是直接创建el-input标签，代码如下(只用改变message这块代码)

 message: h(\'div\', null, [
                        h(\'el-input\', {
                            attrs: {
                                type: \'textarea\',
                                rows: 4
                            },
                            props: {
                                value: _this.commentContent,
                            }
                        })
                    ]),

效果是可以出来的，但是根本输入不了任何内容：

 

 

 查了很多资料，但是未找到任何原因，F12查看渲染出来的组件也是正常的，这里如果有大佬知道原因的话麻烦请指点一下：

(初步猜测，el-input标签渲染之后是多个标签，未渲染之前设置value值，根本没有绑定上真正的textarea标签，可能直接绑定在外层的div上了)

 

 

 2、后面我换了一种写法，就是根据textarea渲染之后的样子直接一点点画出来，直接看代码吧：

 message: h(\'div\', {
                        attrs: {
                            class: \'el-textarea\',
                        },
                    }, [
                        h(\'textarea\', {
                            attrs: {
                                class: \'el-textarea__inner\',
                                autocomplete: \'off\',
                                rows: 4,
                            },
                            value: _this.commentContent,
                        })
                    ]),

然后可以看到效果Ok了

 

还有一个问题就是，这样写的话，vue自动的双向绑定已经没有效果了，只能自己写一个事件监听，监听到数据变化自己手动绑定，上最终完整代码(监听input事件，手动同步input输入内容)：

onComment: function () {
    var _this = this;
    const h = _this.$createElement;
    _this.$msgbox({
        title: \'消息\',
        message: h(\'div\', {
            attrs: {
                class: \'el-textarea\',
            },
        }, [
            h(\'textarea\', {
                attrs: {
                    class: \'el-textarea__inner\',
                    autocomplete: \'off\',
                    rows: 4,
                    id:\'commentContent\'
                },
                value: _this.commentContent,
                on: { input: _this.onCommentInputChange }
            })
        ]),
        showCancelButton: true,
        confirmButtonText: \'评论\',
        cancelButtonText: \'取消\',
        beforeClose: (action, instance, done) => {
            if (action === \'confirm\') {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = \'评论中...\';
                alert(_this.commentContent);
            } else {
                done();
            }
        }
    }).then(action => {
        _this.$message({
            type: \'info\',
            message: \'action: \' + action
        });
    });
},
onCommentInputChange() {
    this.commentContent = document.getElementById("commentContent").value;
}

可自行测试；欢迎大佬拍砖~~~