vue全局注册v-dvloading指令实现指定元素loading效果+批量注册v-xxx指令

机缘:

        在做可视化大屏时发现很多图后端响应时间过长为了达到用户体验效果好需要给每个图表添加一个loading效果,但是每一个组件都要写一个   <dv-loading>Loading...</dv-loading>  还要判断啥时候显示与隐藏但时候想换个loading组件的话还要一个个改 有什么方法可以全局使用像elementui那样v-loading就可以使用 这里使用注册自定义指令实现 

先看 效果


实现过程:

1.在src下的utils下创建一个directives.js文件 用于引入所有vue指令并批量注册指令

import * as directives from './resizeObserver';

// 批量注册指令
export default {
    install(Vue) {
        Object.keys(directives).forEach((key) => {
            Vue.directive(key, directives[key])
        })
    }
}

2.在utils下创建一个dvloading.vue的组件用于全局loading加载的样式模板(根据喜好支持自定义loading样式)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值