基於 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