框架elmentUi 中 $msgbox （MessageBox 弹框）

效果图：

首先看源码：

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

然后看浏览器样式：

 分析：

结合到上面的源码看到这里是p标签包了<span> 和<i>标签,那么怎么才能自定义所有标签呢？要知道input button是有事件的，

这里我就就用多个input 做个实例代码里面有注释

 cenpinmo_ptype_xg(){
        const h = this.$createElement;//必要
        var that=this;//注意
        this.$msgbox({
           title:'输入',
           message: 
            h('p', null, [
            h('input', null, ''),//简单实现input
            h('br', null, ''),//换个行
            h('input',{style:'width:5rem',attrs:{placeholder:'提示文字'}}, ''),//加入input样式 如果用el-input placeholder不会生效
            h('br', null, ''),//换个行
            h('input',{style:'width:5rem',attrs:{placeholder:'添加方法',id:'input_id'},value:'', on:{input:that.onCommentInputChange }}),//加入input 的函数方法 实现数据获取
            h('br', null, ''),//换个行
            h('button',{attrs:{placeholder:'添加方法',id:'button_id'},value:'', on:{click:that.onCommentButton }},'按钮绑定方法'),//按钮绑定click方法
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose:(action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              //模拟数据提交-给个暂停
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 1000);
            } else {
              done();
            }

          }
        }).then(action => {
                this.$message({
                  type: 'info',
                  message: '你输入的是' + action
                })
          })
      },
      onCommentInputChange(){
          console.log("获取值："+document.getElementById("input_id").value);
      },
      onCommentButton(){
        console.log("执行方法！！");
      },

注意这里

 const h = this.$createElement;//必要
        var that=this;//注意

如果用el-input placeholder不会生效

原文链接：http://t.csdn.cn/bV2Obhttp://t.csdn.cn/bV2Obhttp://t.csdn.cn/bV2Ob