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
收藏 0
分享 0
回答1
最佳
-
// 目测你的问题点是状态更新后,你重新创建了loading节点,而非display原来的loading
// 注册 (指令函数) Vue.directive('my-directive', function () { // 这里将会被 `bind` 和 `update` 调用 })
支持 0 反对 0 举报2021-11-26 07:49