elementui使用MessageBox 彈框自定義內容$msgbox：實現一個textarea文本輸入框

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

可自行測試；歡迎大佬拍磚~~~