Element中使用dialog实现下一步出现闪屏现象解决方法

发表于   |   分类于   |     |  

[TOC]


弹窗出现下一步下一步这种页面很常见，使用element ui时一般用dialog实现，如果每一步的弹窗都用一个dialog的话，那么在点击“下一步”，两个dialog弹窗切换的时候会出现闪屏现象，这是因为前一个dialog关闭，新dialog打开有一段时间间隙，会有明显的遮罩层切换效果。

为了避免闪屏现象，可以让所有内容在同一个dialog中，当点击下一步的时候，将dialog的内容动态切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<el-button type="text" @click="dialog = true;choosed='one'">点击打开 Dialog</el-button>
<el-dialog :visible.sync="dialog">
    <div v-if="choosed==='one'">
        <h2>第1步</h2>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="choosed='two'">下一步</el-button>
        </div>
    </div>
    <div v-if="choosed==='two'">
        <h2>第2步</h2>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="choosed='three'">下一步</el-button>
        </div>
    </div>
    ...
  </el-dialog>
  <script>
  export default {
    data() {
      return {
        dialog: false,
        choosed: 'one'
      };
    }
  }
</script>

热评文章