## Loading 加載 全局創建一個顯示頁面加載、異步請求、文件上傳等的加載動效 Loading 只會在全局創建一個，因此在任何位置調用的方法都會控制這同一個組件。主要使用場景是路由切換和Ajax，因為這兩者都不能拿到精確的進度，Loading 會模擬進度，也可以通過`update()`方法來傳入一個精確的進度，比如在文件上傳時會很有用，具體見API。  ### 代碼示例 `main.js`中引入cview后執行全局配置自定義風格及樣式,具體見API： ```javascript import CviewUi from '@/cview' Vue.use(CviewUi) // 全局配置 Vue.prototype.$cvuLoading.config({ theme: 'default', background: '#266593', color: '#fff', zIndex: 99999, content: '加載中，請耐心等待' }) ``` 在路由中使用 ```javascript router.beforeEach((to, from, next) => { Vue.prototype.$cvuLoading.start() next(); }); router.afterEach(route => { Vue.prototype.$cvuLoading.finish() }); ``` 在異步請求中使用 ```html <script> // 以jQuery的Ajax為例，部分代碼省略 import $ from 'jquery'; export default { methods: { getData () { this.$cvuLoading.start() $.ajax({ url: '/api/someurl', type: 'get', success: () => { this.$cvuLoading.finish() } error: () => { this.$cvuLoading.finish() // theme為progress時可調用error方法 // this.$cvuLoading.error() } }); } } } </script> ``` #### 主題 默認風格`theme`:`"default"`:  進度條風格`theme`:`"progress"`:  頂部百分比風格`theme`:`"percent"`:  方塊旋轉風格`theme`:`box`:  icon圖標風格`theme`:`icon`:  ### API 通過直接調用以下方法來使用組件： * `this.$cvuLoading.start()` * `this.$cvuLoading.finish()` * `this.$cvuLoading.error()` * `this.$cvuLoading.update(percent)` * `this.$cvuLoading.config(options)` * `this.$cvuLoading.destroy()` 以上方法隱式的創建及維護Vue組件。函數及參數說明如下： >[warning] 若`theme`參數為`default`、`box`、`icon`，只調用`start`、`finish`方法控制加載開啟關閉即可，其他方法適用于`theme`參數為`progress`、`percent`等進度條風格。 | 函數名 | 說明 | 參數 | | --- | --- | --- | | start | 開始加載 \/ 開始從 0 顯示進度條，并自動加載進度 | 無 | | finish | 結束加載 \/ 結束進度條，自動補全剩余進度 | 無 | | error | 以錯誤的類型結束進度條，自動補全剩余進度 | 無 | | update | 精確加載到指定的進度 | percent，指定的進度百分比 | | config | 全局配置 | options | | destroy | 全局銷毀 | 無 | ### 局部加載調用 當區塊正在獲取數據中時可使用。 `theme`屬性為`default`、`box`、`icon`時適用。  ```html <cvu-loading theme="box" content="加載中"></cvu-loading> ``` ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | theme | 主題，可選值default默認風格、box方塊旋轉風格、icon圖標風格、progress進度條風格、percent頂部百分比風格 | String | default | | icon | icon圖標type值，theme屬性為icon時生效 | String | ios-loading | | height | 進度條高度,單位px，theme為progress或percent生效 | Number | \- | | background | 加載頁背景色，theme為default、progress、box或icon生效 | String | \- | | color | 加載頁文字顏色，theme為default、progress、box或icon生效 | String | \- | | progressColor | 進度條顏色，theme為progress生效 | String | \- | | disProgressText | 是否隱藏進度條上方進度值文字，theme為progress生效 | Boolean | false | | percentColor | 頂部百分比進度條顏色，theme為percent生效 | String | \- | | errorColor | 進度條失敗顏色，theme為progress或percent生效 | String | #FF0000 | | zIndex | 進度條顯示層級 | Number | \- | | content | 提示文字，theme為default、progress、box或icon生效 | String | 加載中，請耐心等待 | | duration | 隱藏時的持續時間，單位 ms | Number | 800 |