【View Design】LoadingBar 加载进度条

技术分子林QI

已于 2024-01-23 14:31:50 修改

阅读量511

点赞数 8

文章标签： view design

于 2024-01-23 14:18:14 首次发布

本文链接：https://blog.csdn.net/qq_44580366/article/details/135767640

版权

View UI Plus概述

View UI Plus是一个基于Vue.js 3的UI组件库，主要用于企业级中后台系统。这个组件库是View Design设计体系中的一部分，旨在提供一套全面、高质量的UI组件，帮助开发者更高效地构建企业级应用。

View UI Plus提供了丰富的组件类型，包括表格、表单、按钮、卡片等常见的UI元素。这些组件都具有高度的可定制性和灵活性，支持多种主题风格和大小，可以根据具体需求进行定制化配置。

此外，View UI Plus还具有以下特点：

性能优化：View UI Plus的组件经过优化，性能良好，可以满足企业级应用对性能的高要求。
易于集成：View UI Plus可以与现有的Vue.js项目快速集成，降低开发难度和成本。
丰富的文档和社区支持：View UI Plus提供了详细的文档和丰富的社区支持，开发者可以快速上手并解决遇到的问题。

总之，View UI Plus是一个功能强大、易于使用、高度可定制的UI组件库，适用于构建企业级中后台系统。

加载进度条组件

一、概述

全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。

LoadingBar只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar 会模拟进度，当然也可以通过update()方法来传入一个精确的进度，比如在文件上传时会很有用，具体见API。

二、使用代码示例

点击 Start 开始进度，点击 Finish 结束。
在调用start()方法后，组件会自动模拟进度，
当调用finish()或error()时，补全进度并自动消失。

在路由中使用

import ViewUIPlus from 'view-ui-plus';
app.use(ViewUIPlus);

router.beforeEach((to, from, next) => {
    ViewUIPlus.LoadingBar.start();
    next();
});

router.afterEach(route => {
    ViewUIPlus.LoadingBar.finish();
});

在异步请求中使用

<script>
import $ from 'jquery';
export default {
    methods: {
        getData () {
            this.$Loading.start();
            $.ajax({
                url: '/api/someurl',
                type: 'get',
                success: () => {
                    this.$Loading.finish();
                }
                error: () => {
                    this.$Loading.error();
                }
            });
        }
    }
}
</script>

三、API

通过直接调用以下方法来使用组件：

this.$Loading.start()
this.$Loading.finish()
this.$Loading.error()
this.$Loading.update(percent)

以上方法隐式的创建及维护Vue组件。函数及参数说明如下：

方法名	说明	参数
start	开始从 0 显示进度条，并自动加载进度	无
finish	结束进度条，自动补全剩余进度	无
error	以错误的类型结束进度条，自动补全剩余进度	无
update	精确加载到指定的进度	percent，指定的进度百分比

另外提供了全局配置和全局销毁的方法：

this.$Loading.config(options)
this.$Loading.destroy()

this.$Loading.config({
    color: '#5cb85c',
    failedColor: '#f0ad4e',
    height: 5
});

属性	说明	类型	默认值
color	进度条的颜色，默认为 View UI Plus 主色	String	primary
failedColor	失败时的进度条颜色，默认为 View UI Plus 主色	String	error
height	进度条高度，单位 px	Number	2
duration	隐藏时的持续时间，单位 ms	Number	800