vue-js-modal 生成的对话框中元素不能立即使用

[Dream4ever]

需求描述

用 vue-js-modal 组件生成的模态对话框中包含 video 元素，但是发现用该组件的 show 方法显示对话框之后，其中的 video 元素并不是立即可用的。

方案调研

调研过程

用下面的 countTime() 函数检查 video 元素什么时候能生成，发现是立刻生成的。

countTime() {
  console.log('modal shown\n' + new Date());
  let haveVideo = false;
  let count = 0;
  while (haveVideo) {
    const vdo = document.querySelectorAll('#video');
    haveVideo = vdo.length ? 1 : false;
    count++;
  }
  console.log('video gotten' + new Date() + '\n' + count);
},

但是在浏览器中调试从 this.$modal.show('video-modal') 这行语句开始往后的部分，发现似乎需要了解 Vue 的执行原理，因为调试的时候，是在执行完了 macroTask 之类的函数之后，video 元素才可用的。

在 this.$modal.show('video-modal') 之后执行了下面的代码，video 还是不可用。

this.$nextTick(() => {
  this.loadVideo();
});

只有用 setTimeout 设置一定的延时，video 标签才可用：

setTimeout(() => {
  this.loadVideo();
}, 100);

入选方案

• ElemeFE/mint-ui：入选原因。

应用过程

记录应用入选方案的过程中所踩的坑，以及其它值得记录的内容。

要点总结

以列表形式记录本次需求实现过程中的要点：

• 要点 1
• 要点 2
• 要点 3