关于Message-box的问题，如何解决？

如何使用element-ui的messagebox做一个系统的新用户引导

<template>
  <div style="width: 100%">
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
 
<style>
</style>

“messagebox做一个系统的新用户引导”，你确定需求的是要这个样子吗？新用户引导不都是在首页加一层蒙层（设置层级），再在对应位置（定位）显示要出现的提示内容，点击下一步，就隐藏当前提示，显示下一个提示。这里唯一要考虑的是屏幕大小和分辨率，因为你是定位的。当然不想自己写，网上也有插件，搜一下就有了（例如：driver.js）

用户指引可以借用第三方插件来实现的，会更容易一些，具体可参考方案可以参考文档---https://blog.csdn.net/duanhy_love/article/details/123135336?utm_source=app&app_version=5.3.0