求助一个vue自定义指令的问题

Question

Vue.directive('loadStatus', function (el, binding) {
  if(!binding) return;
  const option = binding.value;

  //插入一个遮罩层div
  const wrap = document.createElement('div');
  el.insertBefore(wrap, el.lastChild);
  wrap.setAttribute('class', 'status-wrap');
  wrap.setAttribute('style',
    'background: #fff' +
    ';display: block' +
    ';text-align: center' +
    ';width: 100%'+
    ';height:' + el.clientHeight + 'px' +
    ';position:' + (el.style.position ? el.style.position : 'absolute') +
    ';z-index: 1'
  );
  //插入一个子元素展示状态内容
  const statusCont = document.createElement('div');
  statusCont.setAttribute('class', 'status-cont');
  statusCont.setAttribute('id', 'statusCont');
  wrap.insertBefore(statusCont, statusCont.lastChild);
  statusCont.setAttribute('style',
    'font-size: 14px' +
    ';padding-top: 30%'
  );
  //加载中
  if(option.status === 'loading') {
    statusCont.innerHTML = '加载中...';
  }
  //加载失败
  if(option.status === 'fail') {
    statusCont.innerHTML = '<p>加载失败</p><p id="reload">点击重试</p>';
    document.getElementById('reload').onclick = _ => {
      option.reload();
    }
  }
  //加载成功
  if(option.status === 'success') {
    wrap.style.display = 'none';
  }
});

使用：

<div v-load-status="{status: (loading?'loading':'success'), reload: test}"></div>

我定义了一个指令，可以根据组件传进来的状态，判断组件是显示加载中还是加载失败，我这样写，前面都没问题，但是最后一句加载成功为什么一直没生效呢wrap.style.display = 'none';
可以走到这个if判断，但是里面的修改display的句子没生效

Answer 1

// 目测你的问题点是状态更新后，你重新创建了loading节点，而非display原来的loading

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})