ElementUI: диалоговое окно Kill, используйте окно сообщений для его достижения

Нужно ли использовать такую ​​хлопотную штуку как эл-диалог при написании нескольких слов и эл-бокс выбора? Чтобы написать эль-диалог, вам нужно добавить кучу беспорядочных атрибутов, таких как: ширина, верх, добавление к телу, модальное закрытие при нажатии, а эль-диалог по умолчанию не имеет кнопки нижнего колонтитула, вам также нужно добавить кнопку нижнего колонтитула.Добавьте кнопку el для подтверждения. К тому же внутренний стиль приходится заново переписывать.Неужели стиль в el-messagebox не пахнет? Это явно не тот режим разработки, который мне нужен.

после всегоБилл ГейтсСказал: можно использоватьserviceЕсли вы делаете диалог, постарайтесь не использовать егоtemplateсделал диалог

Ближе к дому. Итак, я начал разработку с замены el-dialog на el-messagebox. Глядя на официальную документацию элемента, сообщение содержимого диалога может быть реализовано с помощью $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? ? ?

Я не могу об этом подумать, поэтому мне пришлось посмотреть исходный код элемента и обнаружить, что сообщение было присвоено$slots.defaultохватывать

Тогда я сразу подумал, что сообщение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>

Сделай это! !