脚本宝典收集整理的这篇文章主要介绍了基于 Vue 的 Loading 工具.，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

wc-loading

提供一个通用的 loading 工具, 使得:
用户不必自己写一遍 loading 的逻辑, 而只要提供一个 loading 效果即可.

why?

对于 loading 效果, 通常会存在这么一种情况:
不同的项目中, 使用的 loading 效果不一致. 但是 loading 的逻辑是一致的.
因此, 希望存在一种方式, 提供了一套通用的 loading 逻辑, 而 loading 效果可以由用户自己定义.

实现的相关的点

• loading 出现的时候, 阻止页面滚动

• loading 自带 fade-in, fade-out 效果

• loading 出现之后, 阻止页面的所有 touch 行为

效果

Install

npm i wc-loading --save

usage

// 1 引入用户自定义的 loading 效果
import Loading1 From './user-path/loading1'
import Loading2 from './user-path/loading2'

// 2 引入 wc-loading
import Loading from 'wc-loading'
Vue.use(Loading, {
    default: Loading1,
    page: Loading2, // 设置不同情景下的loading 组件
});

// 3 调用
this.$loading.start(who);  // 唤起 loading
start() 方法拥有一个可选参数 who, 用来告知当前使用哪一个 loading 效果, 不设置则默认为
default 指定的 loading 效果. 

this.$loading.stop()  // 隐藏 loading

用户自定义 Loading 的要求

用户自定义loading.vue 文件, 格式应该如下

<style>
</style>
<template>
    .loading-ele
</template>
<script>
    export default{
        // 这里为空, 为空就行了
    }
</script>

项目地址

项目地址

LICENSE

MIT

脚本宝典总结

以上是脚本宝典为你收集整理的基于 Vue 的 Loading 工具.全部内容，希望文章能够帮你解决基于 Vue 的 Loading 工具.所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。