element使用this.$msgbox创建一个textarea,并实现属性（比如show-word-limit）

先看官网的示例

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

实际上相当于，在调用open函数的时候去渲染了指定的dom结构。如果需求是一个input的话，直接去生成el-input，你会发现无法输入。具体原因可以去挖掘一下。

如果还想使用msgbox，那么就只能去创建一层dom，然后逐级去生产里面的内容。代码如下。

hrender就是h函数，绑定data的数据时，需要去用监听的方法更新vulue，因为hrender的dom结构，只在点击打开的时候渲染，想要dom更新，那只有去执行新的事件了。渲染的textarea标签，在attrs中添加属性时，原生textarea标签的属性生效，比如rows，maxlength等等。属于el-textarea的属性不会生效，道理也很简单。如果要实现show-word-limit 效果，那么就是生成span标签，添加上对应的类名，然后在输入监听的函数里去修改对应的数字。

其实到这里，你会发现，花费的时间精力远大于预期，如果开发比较忙的时候，遇到这样的问题，建议采用dialog，修改一下样式。

 message: hrender(
            'div',
            {
              attrs: {
                class: 'el-textarea'
              }
            },
            [
              hrender('textarea', {
                attrs: {
                  class: 'el-textarea__inner',
                  autocomplete: 'off',
                  rows: 4,
                  id: 'rejectReson',
                  maxlength: 50
                },
                value: that.rejectReson,
                on: {input: that.onRejectResonInputChange}
              }),
              hrender(
                'span',
                {
                  attrs: {
                    class: 'el-input__count',
                    id: 'rejectLimit'
                  }
                },
                '0/50'
              )
            ]
          ),

  onRejectResonInputChange() {
    this.rejectReson = document.querySelector('#rejectReson').value;
    document.querySelector('#rejectLimit').innerHTML = `${this.rejectReson.length}/50`;
  }