Vuejs + Element UI: как создать несколько el-message-box__content

Я пытаюсь создать messageBox с несколькими сообщениями-box__content, такими как это изображение. Как я могу это сделать?

введите здесь описание изображения

введите здесь описание изображения


person Menphis    schedule 11.03.2019    source источник


Ответы (1)


Я не уверен, правильно ли я это понимаю - я имею в виду, что всегда есть ситуации, когда вы можете захотеть это сделать, - но у меня есть ощущение, что в этом случае лучше использовать диалог. Это дает вам больше свободы для редактирования html, в отличие от messageBox.

Окно сообщения выглядит как sweetalert2.

Цитата из документов:

По своему дизайну MessageBox обеспечивает моделирование предупреждений, подтверждений и подсказок системы, поэтому его содержимое должно быть простым. Для более сложного содержимого используйте Dialog.

Пример использования messageBox:

this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
  confirmButtonText: 'OK',
  cancelButtonText: 'Cancel',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: 'Delete completed'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: 'Delete canceled'
  });          
});

Пример использования Диалога:

<template>
<div>
<el-button type="text" @click="dialogVisible = true" v-text="Open Dialog" />
<el-dialog
  title="I am a dialog"
  :visible.sync="dialogVisible"
  width="50%">
  <span>You could play with the html here</span>
  <p v-for="message in messages" v-html="message" />
</el-dialog>
</div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        messages: ["Message one", "Second message"]
      };
    }
  };
</script>
person Haiko    schedule 24.04.2019