ElementUI：干掉dialog，用messagebox来实现吧

写一个几个文字加个el-select框的玩意，有必要用el-dialog这么麻烦的东西么。写个el-dialog还要加一堆乱七八糟的属性如：width、top、append-to-body、close-on-click-modal，还有el-dialog默认是不带footer按钮的，还需要在footer里加上el-button确定才行。另外内部的样式还要重新写一遍，el-messagebox里面的样式不香么。这很明显不是我想要的开发模式。

毕竟比尔盖茨说过：能用service做的 dialog，就尽量不要用template做的 dialog

言归正传。于是，我开始了用el-messagebox代替el-dialog的开发征程。看了一下element官方文档，对话框内容message可以用$createElement去实现

那么我就按照官网的写法来做：

<template>
  <el-button @click="open">打开弹窗</el-button>
</template>
<script>
export default {
  methods: {
    async open() {
      let sex = '未知'
      const h = this.$createElement
      await this.$msgbox({
        title: '提示',
        message: h('p', [
          '选择性别',
          h('el-select', {
            props: {
              value: sex
            },
            on: {
              change: val => (sex = val)
            },
            style: {
              marginLeft: '1em'
            }
          }, ['男', '女', '未知'].map(sex => {
            return h('el-option', {
              key: sex,
              props: {
                label: sex,
                value: sex
              }
            })
          }))
        ])
      })
      alert(sex)
    }
  }
}
</script>
复制代码

效果图：

可是问题出现了，改变不了select的值？？？

百思不得其姐，那只好去看看element源码呗，发现原来是将message赋值给$slots.default了

那么我立刻就想到message是vnode的话，何不去用VueComponent去试试呢？那么就可以改造成：

<template>
  <el-button @click="open">打开弹窗</el-button>
</template>
<script>
import Vue from 'vue'

const MessageboxSelect =  Vue.component('messagebox-select', {
  data() {
    return {
      value: '未知'
    }
  },
  render() {
    const h = this.$createElement
    return h('p', [
      '选择性别',
      h('el-select', {
        props: {
          value: this.value
        },
        on: {
          change: val => (this.value = val)
        },
        style: {
          marginLeft: '1em'
        }
      }, ['男', '女', '未知'].map(sex => {
        return h('el-option', {
          key: sex,
          props: {
            label: sex,
            value: sex
          }
        })
      }))
    ])
  }
})

export default {
  methods: {
    async open() {
      const h = this.$createElement
      await this.$msgbox({
        title: '提示',
        message: h(MessageboxSelect)
      })
    }
  }
}
</script>
复制代码

但是这样会引发一个问题，弹窗消失后再打开会出现之前保留的状态，而不是重新生成初始状态

那么就好办了，只要把Vue.component()这一步放到open里面就可以了

<template>
  <el-button @click="open">打开弹窗</el-button>
</template>
<script>
import Vue from 'vue'

export default {
  methods: {
    async open() {
      let sex = '未知'
      const h = this.$createElement
      await this.$msgbox({
        title: '提示',
        message: h(Vue.component('messagebox-select', {
          data() {
            return {
              value: sex
            }
          },
          render() {
            const h = this.$createElement
            return h('p', [
              '选择性别',
              h('el-select', {
                props: {
                  value: this.value
                },
                on: {
                  change: val => (sex = this.value = val)
                },
                style: {
                  marginLeft: '1em'
                }
              }, ['男', '女', '未知'].map(sex => {
                return h('el-option', {
                  key: sex,
                  props: {
                    label: sex,
                    value: sex
                  }
                })
              }))
            ])
          }
        }))
      })
      alert(sex)
    }
  }
}
</script>
复制代码

搞掂！！