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

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的句子没生效

已解决 悬赏分:0 - 解决时间 2021-11-27 00:50
反对 0举报 0 收藏 0

回答1

最佳
  • @

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

    // 注册 (指令函数)
    Vue.directive('my-directive', function () {
      // 这里将会被 `bind` 和 `update` 调用
    })
    支持 0 反对 0 举报
    2021-11-26 07:49